lakelib 0.3.6 → 0.3.8

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;
@@ -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.
@@ -1993,6 +1994,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 +2027,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 +2152,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 = [];
@@ -4395,7 +4501,7 @@ class Toolbar {
         for (const item of this.dropdownItemList) {
             let selectedValues = selectedValuesMap.get(item.name);
             if (selectedValues === undefined) {
-                selectedValues = item.selectedValues ? item.selectedValues(activeItems) : [];
+                selectedValues = item.selectedValues && activeItems.length > 0 ? item.selectedValues(activeItems) : [];
             }
             const dropdownNode = this.container.find(`div.lake-dropdown[name="${item.name}"]`);
             let isDisabled = disabledNameMap.get(item.name);
@@ -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.6";
+var version = "0.3.8";
 
 // 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);
     }
@@ -8104,7 +8110,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 +8123,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 +8132,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);
@@ -8292,13 +8298,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 +8503,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);
@@ -13765,5 +13772,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