dongsik-yoo

/**
 * Split a paragraph to two paragraphs
 * @param {HTMLElement} paragraph - paragraph element
 */
_splitParagraph(paragraph) {
    const textNodes = [];
    const treeWalker = document.createTreeWalker(paragraph);
    while (treeWalker.nextNode()) {
        const node = treeWalker.currentNode;
        if (node.nodeType === Node.TEXT_NODE) {

dongsik-yoo

// for keeping the cursor
if (range
    && range.startContainer === textNode
    && range.startOffset === index) {
    range.setStartBefore(span);
    range.setEndBefore(span);
}
...
...
// keep the cursor

dongsik-yoo

// recognize lines
let prevSpan;
wrappers.forEach(span => {
    const prevSpanBottom = prevSpan ? prevSpan.getBoundingClientRect().bottom : 0;
    const spanTop = span.getBoundingClientRect().top;
    if (prevSpanBottom < spanTop) {
        lines.push(span);
    }
    prevSpan = span;
});

dongsik-yoo

// find a exceed first line
let nextParagraphCharacters = [];
const {length} = lines;
for (let i = 0; i < length; i += 1) {
    const line = lines[i];
    const lineBottom = this._getBottom(line);
    if (lineBottom > pageBodyBottom) {
        const splitIndex = wrappers.indexOf(line);
        nextParagraphCharacters = wrappers.slice(splitIndex);
        break;

dongsik-yoo

// unwrap text nodes
wrappers.forEach(span => {
    if (span.parentElement) {
        const textNode = span.firstChild;
        span.removeChild(textNode);
        span.parentElement.insertBefore(textNode, span);
        span.parentElement.removeChild(span);
    }
});
// keep the cursor

dongsik-yoo

/**
 * Add event listners to layout pages
 */
_addEventListener() {
    document.addEventListener('keyup', event => {
        if (event.target.isContentEditable) {
            this._layout();
        }
    });
}

dongsik-yoo

// split the paragraph to two paragraphs
const extractRange = document.createRange();
extractRange.setStartBefore(nextParagraphCharacters[0]);
extractRange.setEndAfter(nextParagraphCharacters[nextParagraphCharacters.length - 1]);

const fragment = extractRange.extractContents();
const nextParagraph = paragraph.cloneNode();

nextParagraph.innerHTML = '';
nextParagraph.appendChild(fragment);

dongsik-yoo

var a = 10;

dongsik-yoo

const path = require('path');
const webpack = require('webpack');
const pkg = require('./package.json');
const isProduction = process.env.NODE_ENV === 'production';
const FILENAME = pkg.name + (isProduction ? '.min' : '');
const config = {
  entry: './src/ts/index.ts',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: FILENAME + '.js'

dongsik-yoo

export default {};