lakelib 0.3.7 → 0.3.9

package/lib/lake.css

@@ -870,7 +870,7 @@ button.lake-primary-button.lake-button-hovered {
 .lake-container ul {
   list-style: none;
   margin: 0;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
   padding: 0;
 }
 
@@ -931,8 +931,8 @@ button.lake-primary-button.lake-button-hovered {
 
 .lake-container ol li,
 .lake-container ul li {
-  margin-left: 20px;
-  padding-left: 4px;
+  margin: 0 0 0 20px;
+  padding: 0 0 0 4px;
 }
 
 .lake-container ol li {
@@ -1218,7 +1218,7 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
   border-top: 1px solid var(--lake-border-color);
 }
 
-/* custom properties */
+/* variables */
 :root {
   --lake-code-highlight-keyword: #af00db;
   --lake-code-highlight-name: #444d56;

package/lib/lake.d.ts

@@ -3,6 +3,12 @@ import { LocalizedString } from 'typesafe-i18n';
 
 type KeyValue = Record<string, string>;
 
+type ContentStyleValue = string | string[] | RegExp;
+type ContentStyle = Record<string, ContentStyleValue>;
+type ContentAttributeValue = string | string[] | RegExp | ContentStyle;
+type ContentAttribute = Record<string, ContentAttributeValue>;
+type ContentRules = Record<string, string | ContentAttribute>;
+
 interface EventItem {
     type: string;
     listener: EventListener;
@@ -1013,7 +1019,7 @@ declare class Range$1 {
      */
     get endOffset(): number;
     /**
-     * The deepest — or furthest down the document tree — node that contains both boundary points of the range.
+     * The deepest node, or the lowest point in the document tree, that contains both boundary points of the range.
      */
     get commonAncestor(): Nodes;
     /**
@@ -1451,13 +1457,17 @@ declare class History {
      */
     readonly list: Nodes[];
     /**
-     * An index that always indicates the position at which new content is stored.
+     * A number that always indicates the position at which new content is stored.
      */
     index: number;
     /**
      * The maximum length of the history. Once this limit is reached, the earliest item in the list will be removed.
      */
     limit: number;
+    /**
+     * A ContentRules object defining the HTML parsing rules used by HTMLParser.
+     */
+    contentRules: ContentRules;
     /**
      * An EventEmitter object used to set up events.
      */
@@ -1674,24 +1684,15 @@ interface Config {
     placeholder: string;
     indentWithTab: boolean;
     lang: string;
+    contentRules: ContentRules;
     minChangeSize: number;
     historySize: number;
     onMessage: OnMessage;
     [name: string]: any;
 }
-interface EditorConfig {
+interface EditorConfig extends Partial<Config> {
     root: string | Node | Nodes;
     toolbar?: Toolbar;
-    value?: string;
-    readonly?: boolean;
-    spellcheck?: boolean;
-    tabIndex?: number;
-    placeholder?: string;
-    indentWithTab?: boolean;
-    lang?: string;
-    minChangeSize?: number;
-    onMessage?: OnMessage;
-    [name: string]: any;
 }
 /**
  * The Editor interface provides properties and methods for rendering and manipulating the editor.
@@ -1824,6 +1825,10 @@ declare class Editor {
      * Binds events for history.
      */
     private bindHistoryEvents;
+    /**
+     * Binds events for pointer.
+     */
+    private bindPointerEvents;
     /**
      * Returns translation functions for the specified language.
      */
@@ -1993,6 +1998,8 @@ type SlashItem = SlashButtonItem | SlashUploadItem;
 
 declare const icons: Map<string, string>;
 
+declare function getContentRules(): ContentRules;
+
 /**
  * Returns a Nodes object representing a collection of the nodes.
  * This function is similar to jQuery, but its implementation is very simple.
@@ -2024,7 +2031,7 @@ declare function getBox(boxNode: string | Node | Nodes): Box;
 declare class HTMLParser {
     private readonly rules;
     private readonly source;
-    constructor(content: string | Nodes, rules?: any);
+    constructor(content: string | Nodes, rules?: ContentRules);
     /**
      * Parses the given HTML string and returns the body element from the result.
      */
@@ -2149,4 +2156,4 @@ declare class Dropdown {
     unmount(): void;
 }
 
-export { type ActiveItem, Box, type BoxComponent, type BoxValue, Button, type CommandItem, Dropdown, type DropdownItem, type DropdownMenuItem, Editor, Fragment, HTMLParser, type InitializePlugin, type KeyValue, type MentionItem, type NodePath, Nodes, Range$1 as Range, type SelectionState, type SlashButtonItem, type SlashItem, type SlashUploadItem, TextParser, Toolbar, type ToolbarButtonItem, type ToolbarDropdownItem, type ToolbarItem, type ToolbarUploadItem, type UnmountPlugin, addMark, deleteContents, getBox, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock, splitMarks, template, toBookmark, toHex };
+export { type ActiveItem, Box, type BoxComponent, type BoxValue, Button, type CommandItem, type ContentRules, Dropdown, type DropdownItem, type DropdownMenuItem, Editor, Fragment, HTMLParser, type InitializePlugin, type KeyValue, type MentionItem, type NodePath, Nodes, Range$1 as Range, type SelectionState, type SlashButtonItem, type SlashItem, type SlashUploadItem, TextParser, Toolbar, type ToolbarButtonItem, type ToolbarDropdownItem, type ToolbarItem, type ToolbarUploadItem, type UnmountPlugin, addMark, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock, splitMarks, template, toBookmark, toHex };

package/lib/lake.js

@@ -285,6 +285,112 @@ const icons = new Map([
     ['danger', danger],
 ]);
 
+const blockAttributeRules = {
+    id: /^[\w-]+$/,
+    class: /^[\w\- ]+$/,
+    style: {
+        'text-align': ['left', 'center', 'right', 'justify', 'start', 'end'],
+        'margin-left': /^-?\d+px$/i,
+        'text-indent': /^-?\d+em$/i,
+    },
+};
+function getContentRules() {
+    return {
+        h1: Object.assign({}, blockAttributeRules),
+        h2: Object.assign({}, blockAttributeRules),
+        h3: Object.assign({}, blockAttributeRules),
+        h4: Object.assign({}, blockAttributeRules),
+        h5: Object.assign({}, blockAttributeRules),
+        h6: Object.assign({}, blockAttributeRules),
+        p: Object.assign({}, blockAttributeRules),
+        blockquote: Object.assign(Object.assign({}, blockAttributeRules), { type: ['info', 'tip', 'success', 'warning', 'error', 'danger'] }),
+        ul: Object.assign(Object.assign({}, blockAttributeRules), { type: 'checklist', indent: /^\d+$/ }),
+        ol: Object.assign(Object.assign({}, blockAttributeRules), { start: /^\d+$/, indent: /^\d+$/ }),
+        li: {
+            value: ['true', 'false'],
+        },
+        table: {
+            style: {
+                width: /^-?\d+(px|%)$/i,
+                height: /^-?\d+(px|%)$/i,
+                border: /^[^"]+$/,
+                'border-width': /^-?\d+px$/i,
+                'border-style': /^[\w-]+$/,
+                'border-color': /^[^"]+$/,
+                'background-color': /^[^"]+$/,
+            },
+        },
+        tr: {
+            style: {
+                height: /^-?\d+(px|%)$/i,
+            },
+        },
+        th: 'td',
+        td: {
+            colspan: /^\d+$/,
+            rowspan: /^\d+$/,
+            style: {
+                width: /^-?\d+(px|%)$/i,
+                height: /^-?\d+(px|%)$/i,
+                border: /^[^"]+$/,
+                'border-width': /^-?\d+px$/i,
+                'border-style': /^[\w-]+$/,
+                'border-color': /^[^"]+$/,
+                'background-color': /^[^"]+$/,
+                'text-align': ['left', 'center', 'right', 'justify'],
+            },
+        },
+        'lake-box': {
+            type: ['inline', 'block'],
+            name: /^[\w-]+$/,
+            value: /^[^"]+$/,
+            focus: ['start', 'center', 'end'],
+        },
+        br: {},
+        hr: {},
+        img: {
+            src: /^[^"]+$/,
+            width: /^-?\d+px$/i,
+            height: /^-?\d+px$/i,
+            'data-lake-value': /^[^"]+$/,
+            alt: /^[^"]+$/,
+            style: {
+                width: /^-?\d+px$/i,
+                height: /^-?\d+px$/i,
+            },
+        },
+        span: {
+            class: /^[\w\- ]+$/,
+            style: {
+                color: /^[^"]+$/,
+                'background-color': /^[^"]+$/,
+                'font-family': /^[^;]+$/,
+                'font-size': /^[^"]+$/,
+            },
+        },
+        b: 'strong',
+        strong: {},
+        em: 'i',
+        i: {},
+        u: {},
+        s: {},
+        sub: {},
+        sup: {},
+        code: {},
+        a: {
+            class: /^[\w\- ]+$/,
+            name: /^[\w-]+$/,
+            href: /^[^"]+$/,
+            target: /^[\w-]+$/,
+            rel: /^[^"]+$/,
+            download: /^[^"]+$/,
+        },
+        'lake-bookmark': {
+            type: ['anchor', 'focus'],
+        },
+    };
+}
+
 // Returns an array representing a list of the document's elements.
 function toNodeList(content, valueType) {
     const nodeList = [];
@@ -1543,7 +1649,7 @@ class Range {
         return this.range.endOffset;
     }
     /**
-     * The deepest — or furthest down the document tree — node that contains both boundary points of the range.
+     * The deepest node, or the lowest point in the document tree, that contains both boundary points of the range.
      */
     get commonAncestor() {
         return new Nodes(this.range.commonAncestorContainer);
@@ -4843,112 +4949,6 @@ class Fragment {
     }
 }
 
-const blockAttributeRules = {
-    id: /^[\w-]+$/,
-    class: /^[\w\- ]+$/,
-    style: {
-        'text-align': ['left', 'center', 'right', 'justify', 'start', 'end'],
-        'margin-left': /^-?\d+px$/i,
-        'text-indent': /^-?\d+em$/i,
-    },
-};
-function getElementRules() {
-    return {
-        h1: Object.assign({}, blockAttributeRules),
-        h2: Object.assign({}, blockAttributeRules),
-        h3: Object.assign({}, blockAttributeRules),
-        h4: Object.assign({}, blockAttributeRules),
-        h5: Object.assign({}, blockAttributeRules),
-        h6: Object.assign({}, blockAttributeRules),
-        p: Object.assign({}, blockAttributeRules),
-        blockquote: Object.assign(Object.assign({}, blockAttributeRules), { type: ['info', 'tip', 'success', 'warning', 'error', 'danger'] }),
-        ul: Object.assign(Object.assign({}, blockAttributeRules), { type: 'checklist', indent: /^\d+$/ }),
-        ol: Object.assign(Object.assign({}, blockAttributeRules), { start: /^\d+$/, indent: /^\d+$/ }),
-        li: {
-            value: ['true', 'false'],
-        },
-        table: {
-            style: {
-                width: /^-?\d+(px|%)$/i,
-                height: /^-?\d+(px|%)$/i,
-                border: /^[^"]+$/,
-                'border-width': /^-?\d+px$/i,
-                'border-style': /^[\w-]+$/,
-                'border-color': /^[^"]+$/,
-                'background-color': /^[^"]+$/,
-            },
-        },
-        tr: {
-            style: {
-                height: /^-?\d+(px|%)$/i,
-            },
-        },
-        th: 'td',
-        td: {
-            colspan: /^\d+$/,
-            rowspan: /^\d+$/,
-            style: {
-                width: /^-?\d+(px|%)$/i,
-                height: /^-?\d+(px|%)$/i,
-                border: /^[^"]+$/,
-                'border-width': /^-?\d+px$/i,
-                'border-style': /^[\w-]+$/,
-                'border-color': /^[^"]+$/,
-                'background-color': /^[^"]+$/,
-                'text-align': ['left', 'center', 'right', 'justify'],
-            },
-        },
-        'lake-box': {
-            type: ['inline', 'block'],
-            name: /^[\w-]+$/,
-            value: /^[^"]+$/,
-            focus: ['start', 'center', 'end'],
-        },
-        br: {},
-        hr: {},
-        img: {
-            src: /^[^"]+$/,
-            width: /^-?\d+px$/i,
-            height: /^-?\d+px$/i,
-            'data-lake-value': /^[^"]+$/,
-            alt: /^[^"]+$/,
-            style: {
-                width: /^-?\d+px$/i,
-                height: /^-?\d+px$/i,
-            },
-        },
-        span: {
-            class: /^[\w\- ]+$/,
-            style: {
-                color: /^[^"]+$/,
-                'background-color': /^[^"]+$/,
-                'font-family': /^[^;]+$/,
-                'font-size': /^[^"]+$/,
-            },
-        },
-        b: 'strong',
-        strong: {},
-        em: 'i',
-        i: {},
-        u: {},
-        s: {},
-        sub: {},
-        sup: {},
-        code: {},
-        a: {
-            class: /^[\w\- ]+$/,
-            name: /^[\w-]+$/,
-            href: /^[^"]+$/,
-            target: /^[\w-]+$/,
-            rel: /^[^"]+$/,
-            download: /^[^"]+$/,
-        },
-        'lake-bookmark': {
-            type: ['anchor', 'focus'],
-        },
-    };
-}
-
 // Converts a string from style property of element to a key-value object that contains a list of all styles properties.
 function parseStyle(styleValue) {
     styleValue = styleValue.replace(/"/gi, '"');
@@ -4967,7 +4967,7 @@ function parseStyle(styleValue) {
  * The HTMLParser interface provides the ability to parse an HTML string according to specified rules.
  */
 class HTMLParser {
-    constructor(content, rules = getElementRules()) {
+    constructor(content, rules = getContentRules()) {
         this.rules = rules;
         if (typeof content === 'string') {
             this.source = this.parseHTML(content);
@@ -6273,7 +6273,7 @@ function removeBox(range) {
     return box;
 }
 
-var version = "0.3.7";
+var version = "0.3.9";
 
 // Converts the custom HTML tags to the special tags that can not be parsed by browser.
 function denormalizeValue(value) {
@@ -7212,13 +7212,17 @@ class History {
          */
         this.list = [];
         /**
-         * An index that always indicates the position at which new content is stored.
+         * A number that always indicates the position at which new content is stored.
          */
         this.index = 0;
         /**
          * The maximum length of the history. Once this limit is reached, the earliest item in the list will be removed.
          */
         this.limit = 100;
+        /**
+         * A ContentRules object defining the HTML parsing rules used by HTMLParser.
+         */
+        this.contentRules = getContentRules();
         /**
          * An EventEmitter object used to set up events.
          */
@@ -7232,7 +7236,7 @@ class History {
             .replace(/<lake-bookmark\s+type="focus">\s*<\/lake-bookmark>/gi, '');
     }
     getValue(container) {
-        return new HTMLParser(container).getHTML();
+        return new HTMLParser(container, this.contentRules).getHTML();
     }
     addIdToBoxes(node) {
         node.find('lake-box').each(nativeNode => {
@@ -7575,6 +7579,7 @@ const defaultConfig = {
     placeholder: '',
     indentWithTab: true,
     lang: 'en-US',
+    contentRules: getContentRules(),
     minChangeSize: 5,
     historySize: 100,
     onMessage: (type, message) => {
@@ -7762,6 +7767,7 @@ class Editor {
         this.command = new Command(this.selection);
         this.history = new History(this.selection);
         this.history.limit = this.config.historySize;
+        this.history.contentRules = this.config.contentRules;
         this.keystroke = new Keystroke(this.container);
         editors.set(this.container.id, this);
     }
@@ -7932,6 +7938,28 @@ class Editor {
             }
         });
     }
+    /**
+     * Binds events for pointer.
+     */
+    bindPointerEvents() {
+        this.container.on('pointerdown', event => {
+            const pointerEvent = event;
+            if (pointerEvent.target !== null && pointerEvent.target !== this.container.get(0)) {
+                return;
+            }
+            const lastChild = this.container.last();
+            if (lastChild.isTable || lastChild.isBlockBox) {
+                const lastChildRect = lastChild.get(0).getBoundingClientRect();
+                if (pointerEvent.clientY > lastChildRect.bottom) {
+                    pointerEvent.preventDefault();
+                    const paragraph = query('<p><br /></p>');
+                    lastChild.after(paragraph);
+                    this.selection.range.shrinkBefore(paragraph);
+                    this.selection.sync();
+                }
+            }
+        });
+    }
     /**
      * Returns translation functions for the specified language.
      */
@@ -8104,7 +8132,7 @@ class Editor {
      */
     setValue(value) {
         value = normalizeValue(value);
-        const htmlParser = new HTMLParser(value);
+        const htmlParser = new HTMLParser(value, this.config.contentRules);
         const fragment = htmlParser.getFragment();
         this.container.empty();
         this.togglePlaceholderClass(htmlParser.getHTML());
@@ -8117,7 +8145,7 @@ class Editor {
      */
     getValue() {
         const item = this.history.cloneContainer();
-        let value = new HTMLParser(item).getHTML();
+        let value = new HTMLParser(item, this.config.contentRules).getHTML();
         value = denormalizeValue(value);
         return value;
     }
@@ -8126,7 +8154,7 @@ class Editor {
      */
     render() {
         const value = normalizeValue(this.config.value);
-        const htmlParser = new HTMLParser(value);
+        const htmlParser = new HTMLParser(value, this.config.contentRules);
         const fragment = htmlParser.getFragment();
         this.root.empty();
         this.root.append(this.containerWrapper);
@@ -8155,6 +8183,7 @@ class Editor {
             document.addEventListener('click', this.clickListener);
             this.bindInputEvents();
             this.bindHistoryEvents();
+            this.bindPointerEvents();
         }
     }
     /**
@@ -8292,13 +8321,14 @@ function changeTagName(element, newTagName) {
 }
 
 const blockSelector = Array.from(blockTagNames).join(',');
-function getPasteElementRules() {
-    const rules = getElementRules();
+function changeContentRules(rules) {
     rules.div = rules.p;
     for (const key of Object.keys(rules)) {
         const attributeRules = rules[key];
-        delete attributeRules.id;
-        delete attributeRules.class;
+        if (typeof attributeRules !== 'string') {
+            delete attributeRules.id;
+            delete attributeRules.class;
+        }
     }
     return rules;
 }
@@ -8496,7 +8526,7 @@ var paste = (editor) => {
             return;
         }
         const content = normalizeValue(dataTransfer.getData('text/html'));
-        const rules = getPasteElementRules();
+        const rules = changeContentRules(editor.config.contentRules);
         const htmlParser = new HTMLParser(content, rules);
         const fragment = htmlParser.getFragment();
         editor.event.emit('beforepaste', fragment);
@@ -11406,6 +11436,9 @@ function appendButtonGroup(box) {
     const editor = box.getEditor();
     const boxContainer = box.getContainer();
     const rootNode = boxContainer.find('.lake-video');
+    if (rootNode.find('.lake-corner-toolbar').length > 0) {
+        return;
+    }
     new CornerToolbar({
         locale: editor.locale,
         root: rootNode,
@@ -11451,22 +11484,6 @@ function showVideo(box) {
     if (!editor.readonly) {
         iframeNode.on('load', () => {
             appendButtonGroup(box);
-            new CornerToolbar({
-                locale: editor.locale,
-                root: rootNode,
-                items: [
-                    {
-                        name: 'remove',
-                        icon: icons.get('remove'),
-                        tooltip: editor.locale.video.remove(),
-                        onClick: event => {
-                            event.stopPropagation();
-                            editor.selection.removeBox(box);
-                            editor.history.save();
-                        },
-                    },
-                ],
-            }).render();
             new Resizer({
                 root: rootNode,
                 target: boxContainer,
@@ -11485,7 +11502,7 @@ function showVideo(box) {
             }).render();
         });
     }
-    rootNode.append(iframeNode);
+    rootNode.prepend(iframeNode);
 }
 var videoBox = {
     type: 'inline',
@@ -13765,5 +13782,5 @@ Editor.plugin.add('arrowKeys', arrowKeys);
 Editor.plugin.add('escapeKey', escapeKey);
 Editor.plugin.add('slash', slash);
 
-export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, addMark, deleteContents, getBox, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, template, toBookmark, toHex };
+export { Box, Button, Dropdown, Editor, Fragment, HTMLParser, Nodes, Range, TextParser, Toolbar, addMark, deleteContents, getBox, getContentRules, icons, insertBlock, insertBookmark, insertBox, insertContents, query, removeBox, removeMark, setBlocks, splitBlock$1 as splitBlock, splitMarks, template, toBookmark, toHex };
 //# sourceMappingURL=lake.js.map