@limetech/lime-elements 37.39.1 → 37.40.0

package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-commands.js

@@ -1,77 +1,82 @@
 import { toggleMark, setBlockType, wrapIn } from 'prosemirror-commands';
 import { wrapInList } from 'prosemirror-schema-list';
-export class MenuCommandFactory {
-  constructor(schema) {
-    this.markNames = {
-      bold: 'strong',
-      italic: 'em',
-      underline: 'underline',
-      blockquote: 'blockquote',
-      headerlevel1: 'headerlevel1',
-      headerlevel2: 'headerlevel2',
-      headerlevel3: 'headerlevel3',
-      addorremovelink: 'link',
-      numberedlist: 'ordered_list',
-      list: 'bullet_list',
+import { EditorMenuTypes, LevelMapping } from './types';
+const createToggleMarkCommand = (schema, markName, url) => {
+  const markType = schema.marks[markName];
+  if (!markType) {
+    throw new Error(`Mark "${markName}" not found in schema`);
+  }
+  if (markName === EditorMenuTypes.Link && url) {
+    const attrs = {
+      href: url,
+      target: isExternalLink(url) ? '_blank' : null,
     };
-    this.schema = schema;
+    return toggleMark(markType, attrs);
   }
-  createCommand(mark) {
-    if (this.markNames[mark]) {
-      mark = this.markNames[mark];
-    }
-    switch (mark) {
-      case 'strong':
-      case 'em':
-      case 'underline':
-        return this.createToggleMarkCommand(mark);
-      case 'paragraph':
-        return this.createSetNodeTypeCommand(mark);
-      case 'headerlevel1':
-      case 'headerlevel2':
-      case 'headerlevel3':
-        return this.createSetNodeTypeCommand('heading', parseInt(mark[mark.length - 1], 10));
-      case 'blockquote':
-        return this.createWrapInCommand(mark);
-      case 'ordered_list':
-      case 'bullet_list':
-        return this.createListCommand(mark);
-      default:
-        throw new Error(`The Mark "${mark}" is not supported`);
-    }
+  return toggleMark(markType);
+};
+const isExternalLink = (url) => {
+  return !url.startsWith(window.location.origin);
+};
+const createSetNodeTypeCommand = (schema, nodeType, level) => {
+  const type = schema.nodes[nodeType];
+  if (!type) {
+    throw new Error(`Node type "${nodeType}" not found in schema`);
   }
-  createToggleMarkCommand(markName) {
-    const markType = this.schema.marks[markName];
-    if (!markType) {
-      throw new Error(`Mark "${markName}" not found in schema`);
-    }
-    return toggleMark(markType);
+  if (nodeType === 'heading' && level) {
+    return setBlockType(type, { level: level });
   }
-  createSetNodeTypeCommand(nodeType, level) {
-    const type = this.schema.nodes[nodeType];
-    if (!type) {
-      throw new Error(`Node type "${nodeType}" not found in schema`);
-    }
-    if (nodeType === 'heading' && level) {
-      return setBlockType(type, { level: level });
-    }
-    else {
-      return setBlockType(type);
-    }
+  else {
+    return setBlockType(type);
   }
-  createWrapInCommand(nodeType) {
-    const type = this.schema.nodes[nodeType];
-    if (!type) {
-      throw new Error(`Node type "${nodeType}" not found in schema`);
-    }
-    return wrapIn(type);
+};
+const createWrapInCommand = (schema, nodeType) => {
+  const type = schema.nodes[nodeType];
+  if (!type) {
+    throw new Error(`Node type "${nodeType}" not found in schema`);
+  }
+  return wrapIn(type);
+};
+const createListCommand = (schema, listType) => {
+  const type = schema.nodes[listType];
+  if (!type) {
+    throw new Error(`List type "${listType}" not found in schema`);
   }
-  createListCommand(listType) {
-    const type = this.schema.nodes[listType];
-    if (!type) {
-      throw new Error(`List type "${listType}" not found in schema`);
+  return wrapInList(type);
+};
+const commandMapping = {
+  strong: createToggleMarkCommand,
+  em: createToggleMarkCommand,
+  underline: createToggleMarkCommand,
+  headerlevel1: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.one),
+  headerlevel2: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.two),
+  headerlevel3: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.three),
+  blockquote: createWrapInCommand,
+  /* eslint-disable camelcase */
+  ordered_list: createListCommand,
+  bullet_list: createListCommand,
+  /* eslint-enable camelcase */
+  link: createToggleMarkCommand,
+};
+export class MenuCommandFactory {
+  constructor(schema) {
+    this.schema = schema;
+  }
+  getCommand(mark, url) {
+    const commandFunc = commandMapping[mark];
+    if (!commandFunc) {
+      throw new Error(`The Mark "${mark}" is not supported`);
     }
-    return wrapInList(type);
+    return commandFunc(this.schema, mark, url);
+  }
+  buildKeymap() {
+    return {
+      'Mod-B': this.getCommand(EditorMenuTypes.Bold),
+      'Mod-I': this.getCommand(EditorMenuTypes.Italic),
+      'Mod-Shift-1': this.getCommand(EditorMenuTypes.HeaderLevel1),
+      'Mod-Shift-2': this.getCommand(EditorMenuTypes.HeaderLevel2),
+      'Mod-Shift-3': this.getCommand(EditorMenuTypes.HeaderLevel3),
+    };
   }
 }
 //# sourceMappingURL=menu-commands.js.map

package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-commands.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-commands.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/menu-commands.ts"],"names":[],"mappings":"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","sourcesContent":["import { toggleMark, setBlockType, wrapIn } from 'prosemirror-commands';\nimport { Schema, MarkType } from 'prosemirror-model';\nimport { wrapInList } from 'prosemirror-schema-list';\n\nexport class MenuCommandFactory {\n    private schema: Schema;\n\n    constructor(schema: Schema) {\n        this.schema = schema;\n    }\n\n    private markNames = {\n        bold: 'strong',\n        italic: 'em',\n        underline: 'underline',\n        blockquote: 'blockquote',\n        headerlevel1: 'headerlevel1',\n        headerlevel2: 'headerlevel2',\n        headerlevel3: 'headerlevel3',\n        addorremovelink: 'link',\n        numberedlist: 'ordered_list',\n        list: 'bullet_list',\n    };\n\n    createCommand(mark: string) {\n        if (this.markNames[mark]) {\n            mark = this.markNames[mark];\n        }\n\n        switch (mark) {\n            case 'strong':\n            case 'em':\n            case 'underline':\n                return this.createToggleMarkCommand(mark);\n            case 'paragraph':\n                return this.createSetNodeTypeCommand(mark);\n            case 'headerlevel1':\n            case 'headerlevel2':\n            case 'headerlevel3':\n                return this.createSetNodeTypeCommand(\n                    'heading',\n                    parseInt(mark[mark.length - 1], 10),\n                );\n            case 'blockquote':\n                return this.createWrapInCommand(mark);\n            case 'ordered_list':\n            case 'bullet_list':\n                return this.createListCommand(mark);\n            default:\n                throw new Error(`The Mark \"${mark}\" is not supported`);\n        }\n    }\n\n    private createToggleMarkCommand(markName: string) {\n        const markType: MarkType | undefined = this.schema.marks[markName];\n        if (!markType) {\n            throw new Error(`Mark \"${markName}\" not found in schema`);\n        }\n\n        return toggleMark(markType);\n    }\n\n    private createSetNodeTypeCommand(nodeType: string, level?: number) {\n        const type = this.schema.nodes[nodeType];\n        if (!type) {\n            throw new Error(`Node type \"${nodeType}\" not found in schema`);\n        }\n\n        if (nodeType === 'heading' && level) {\n            return setBlockType(type, { level: level });\n        } else {\n            return setBlockType(type);\n        }\n    }\n\n    private createWrapInCommand(nodeType: string) {\n        const type = this.schema.nodes[nodeType];\n        if (!type) {\n            throw new Error(`Node type \"${nodeType}\" not found in schema`);\n        }\n\n        return wrapIn(type);\n    }\n\n    private createListCommand(listType: string) {\n        const type = this.schema.nodes[listType];\n        if (!type) {\n            throw new Error(`List type \"${listType}\" not found in schema`);\n        }\n\n        return wrapInList(type);\n    }\n}\n"]}
+{"version":3,"file":"menu-commands.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/menu-commands.ts"],"names":[],"mappings":"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","sourcesContent":["import { toggleMark, setBlockType, wrapIn } from 'prosemirror-commands';\nimport { Schema, MarkType, NodeType } from 'prosemirror-model';\nimport { wrapInList } from 'prosemirror-schema-list';\nimport { Command } from 'prosemirror-state';\nimport { EditorMenuTypes, LevelMapping } from './types';\n\ntype CommandFunction = (\n    schema: Schema,\n    mark: EditorMenuTypes,\n    url?: string,\n) => Command;\n\ninterface CommandMapping {\n    [key: string]: CommandFunction;\n}\n\nconst createToggleMarkCommand = (\n    schema: Schema,\n    markName: string,\n    url?: string,\n): Command => {\n    const markType: MarkType | undefined = schema.marks[markName];\n    if (!markType) {\n        throw new Error(`Mark \"${markName}\" not found in schema`);\n    }\n\n    if (markName === EditorMenuTypes.Link && url) {\n        const attrs = {\n            href: url,\n            target: isExternalLink(url) ? '_blank' : null,\n        };\n\n        return toggleMark(markType, attrs);\n    }\n\n    return toggleMark(markType);\n};\n\nconst isExternalLink = (url: string): boolean => {\n    return !url.startsWith(window.location.origin);\n};\n\nconst createSetNodeTypeCommand = (\n    schema: Schema,\n    nodeType: string,\n    level?: number,\n): Command => {\n    const type: NodeType | undefined = schema.nodes[nodeType];\n    if (!type) {\n        throw new Error(`Node type \"${nodeType}\" not found in schema`);\n    }\n\n    if (nodeType === 'heading' && level) {\n        return setBlockType(type, { level: level });\n    } else {\n        return setBlockType(type);\n    }\n};\n\nconst createWrapInCommand = (schema: Schema, nodeType: string): Command => {\n    const type: NodeType | undefined = schema.nodes[nodeType];\n    if (!type) {\n        throw new Error(`Node type \"${nodeType}\" not found in schema`);\n    }\n\n    return wrapIn(type);\n};\n\nconst createListCommand = (schema: Schema, listType: string): Command => {\n    const type: NodeType | undefined = schema.nodes[listType];\n    if (!type) {\n        throw new Error(`List type \"${listType}\" not found in schema`);\n    }\n\n    return wrapInList(type);\n};\n\nconst commandMapping: CommandMapping = {\n    strong: createToggleMarkCommand,\n    em: createToggleMarkCommand,\n    underline: createToggleMarkCommand,\n    headerlevel1: (schema) =>\n        createSetNodeTypeCommand(\n            schema,\n            LevelMapping.Heading,\n            LevelMapping.one,\n        ),\n    headerlevel2: (schema) =>\n        createSetNodeTypeCommand(\n            schema,\n            LevelMapping.Heading,\n            LevelMapping.two,\n        ),\n    headerlevel3: (schema) =>\n        createSetNodeTypeCommand(\n            schema,\n            LevelMapping.Heading,\n            LevelMapping.three,\n        ),\n    blockquote: createWrapInCommand,\n    /* eslint-disable camelcase */\n    ordered_list: createListCommand,\n    bullet_list: createListCommand,\n    /* eslint-enable camelcase */\n    link: createToggleMarkCommand,\n};\n\nexport class MenuCommandFactory {\n    private schema: Schema;\n\n    constructor(schema: Schema) {\n        this.schema = schema;\n    }\n\n    public getCommand(mark: EditorMenuTypes, url?: string) {\n        const commandFunc = commandMapping[mark];\n        if (!commandFunc) {\n            throw new Error(`The Mark \"${mark}\" is not supported`);\n        }\n\n        return commandFunc(this.schema, mark, url);\n    }\n\n    buildKeymap() {\n        return {\n            'Mod-B': this.getCommand(EditorMenuTypes.Bold),\n            'Mod-I': this.getCommand(EditorMenuTypes.Italic),\n            'Mod-Shift-1': this.getCommand(EditorMenuTypes.HeaderLevel1),\n            'Mod-Shift-2': this.getCommand(EditorMenuTypes.HeaderLevel2),\n            'Mod-Shift-3': this.getCommand(EditorMenuTypes.HeaderLevel3),\n        };\n    }\n}\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-items.js

@@ -1,3 +1,4 @@
+import { EditorMenuTypes } from './types';
 const getCommandSymbols = () => {
   const macUserAgent = /Macintosh|MacIntel|MacPPC|Mac68K/;
   if (navigator.userAgent.match(macUserAgent)) {
@@ -8,14 +9,14 @@ const getCommandSymbols = () => {
 const { mod, shift } = getCommandSymbols();
 export const textEditorMenuItems = [
   {
-    value: 'strong',
+    value: EditorMenuTypes.Bold,
     text: 'Bold',
     commandText: `${mod} B`,
     icon: '-lime-text-bold',
     iconOnly: true,
   },
   {
-    value: 'em',
+    value: EditorMenuTypes.Italic,
     text: 'Italic',
     commandText: `${mod} I`,
     icon: '-lime-text-italic',
@@ -23,21 +24,21 @@ export const textEditorMenuItems = [
   },
   { separator: true },
   {
-    value: 'headerlevel1',
+    value: EditorMenuTypes.HeaderLevel1,
     text: 'Header Level 1',
     commandText: `${mod} ${shift} 1`,
     icon: '-lime-text-h-heading-1',
     iconOnly: true,
   },
   {
-    value: 'headerlevel2',
+    value: EditorMenuTypes.HeaderLevel2,
     text: 'Header Level 2',
     commandText: `${mod} ${shift} 2`,
     icon: '-lime-text-h-heading-2',
     iconOnly: true,
   },
   {
-    value: 'headerlevel3',
+    value: EditorMenuTypes.HeaderLevel3,
     text: 'Header Level 3',
     commandText: `${mod} ${shift} 3`,
     icon: '-lime-text-h-heading-3',
@@ -45,19 +46,19 @@ export const textEditorMenuItems = [
   },
   { separator: true },
   {
-    value: 'bullet_list',
+    value: EditorMenuTypes.BulletList,
     text: 'Bullet list',
     icon: '-lime-text-bulleted-list',
     iconOnly: true,
   },
   {
-    value: 'ordered_list',
+    value: EditorMenuTypes.OrderedList,
     text: 'Numbered list',
     icon: '-lime-text-ordered-list',
     iconOnly: true,
   },
   {
-    value: 'blockquote',
+    value: EditorMenuTypes.Blockquote,
     text: 'Blockquote',
     icon: '-lime-text-blockquote',
     iconOnly: true,

package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-items.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/menu-items.ts"],"names":[],"mappings":"AAGA,MAAM,iBAAiB,GAAG,GAIxB,EAAE;EACA,MAAM,YAAY,GAAG,kCAAkC,CAAC;EACxD,IAAI,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;IACzC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;GAChD;EAED,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,iBAAiB,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAyC;EACrE;IACI,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,GAAG,GAAG,IAAI;IACvB,IAAI,EAAE,iBAAiB;IACvB,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,IAAI;IACX,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,GAAG,GAAG,IAAI;IACvB,IAAI,EAAE,mBAAmB;IACzB,QAAQ,EAAE,IAAI;GACjB;EACD,EAAE,SAAS,EAAE,IAAI,EAAE;EACnB;IACI,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,gBAAgB;IACtB,WAAW,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI;IAChC,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,gBAAgB;IACtB,WAAW,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI;IAChC,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,gBAAgB;IACtB,WAAW,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI;IAChC,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;GACjB;EACD,EAAE,SAAS,EAAE,IAAI,EAAE;EACnB;IACI,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,0BAA0B;IAChC,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,yBAAyB;IAC/B,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE,IAAI;GACjB;CACJ,CAAC","sourcesContent":["import { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\n\nconst getCommandSymbols = (): {\n    mod: string;\n    option: string;\n    shift: string;\n} => {\n    const macUserAgent = /Macintosh|MacIntel|MacPPC|Mac68K/;\n    if (navigator.userAgent.match(macUserAgent)) {\n        return { mod: '⌘', option: '⌥', shift: '⇧' };\n    }\n\n    return { mod: 'Ctrl', option: 'Alt', shift: 'Shift' };\n};\n\nconst { mod, shift } = getCommandSymbols();\n\nexport const textEditorMenuItems: Array<ActionBarItem | ListSeparator> = [\n    {\n        value: 'strong',\n        text: 'Bold',\n        commandText: `${mod} B`,\n        icon: '-lime-text-bold',\n        iconOnly: true,\n    },\n    {\n        value: 'em',\n        text: 'Italic',\n        commandText: `${mod} I`,\n        icon: '-lime-text-italic',\n        iconOnly: true,\n    },\n    { separator: true },\n    {\n        value: 'headerlevel1',\n        text: 'Header Level 1',\n        commandText: `${mod} ${shift} 1`,\n        icon: '-lime-text-h-heading-1',\n        iconOnly: true,\n    },\n    {\n        value: 'headerlevel2',\n        text: 'Header Level 2',\n        commandText: `${mod} ${shift} 2`,\n        icon: '-lime-text-h-heading-2',\n        iconOnly: true,\n    },\n    {\n        value: 'headerlevel3',\n        text: 'Header Level 3',\n        commandText: `${mod} ${shift} 3`,\n        icon: '-lime-text-h-heading-3',\n        iconOnly: true,\n    },\n    { separator: true },\n    {\n        value: 'bullet_list',\n        text: 'Bullet list',\n        icon: '-lime-text-bulleted-list',\n        iconOnly: true,\n    },\n    {\n        value: 'ordered_list',\n        text: 'Numbered list',\n        icon: '-lime-text-ordered-list',\n        iconOnly: true,\n    },\n    {\n        value: 'blockquote',\n        text: 'Blockquote',\n        icon: '-lime-text-blockquote',\n        iconOnly: true,\n    },\n];\n"]}
+{"version":3,"file":"menu-items.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/menu-items.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,iBAAiB,GAAG,GAIxB,EAAE;EACA,MAAM,YAAY,GAAG,kCAAkC,CAAC;EACxD,IAAI,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,EAAE;IACzC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;GAChD;EAED,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;AAC1D,CAAC,CAAC;AAEF,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,iBAAiB,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAE5B;EACA;IACI,KAAK,EAAE,eAAe,CAAC,IAAI;IAC3B,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,GAAG,GAAG,IAAI;IACvB,IAAI,EAAE,iBAAiB;IACvB,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,eAAe,CAAC,MAAM;IAC7B,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,GAAG,GAAG,IAAI;IACvB,IAAI,EAAE,mBAAmB;IACzB,QAAQ,EAAE,IAAI;GACjB;EACD,EAAE,SAAS,EAAE,IAAI,EAAE;EACnB;IACI,KAAK,EAAE,eAAe,CAAC,YAAY;IACnC,IAAI,EAAE,gBAAgB;IACtB,WAAW,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI;IAChC,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,eAAe,CAAC,YAAY;IACnC,IAAI,EAAE,gBAAgB;IACtB,WAAW,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI;IAChC,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,eAAe,CAAC,YAAY;IACnC,IAAI,EAAE,gBAAgB;IACtB,WAAW,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI;IAChC,IAAI,EAAE,wBAAwB;IAC9B,QAAQ,EAAE,IAAI;GACjB;EACD,EAAE,SAAS,EAAE,IAAI,EAAE;EACnB;IACI,KAAK,EAAE,eAAe,CAAC,UAAU;IACjC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,0BAA0B;IAChC,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,eAAe,CAAC,WAAW;IAClC,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,yBAAyB;IAC/B,QAAQ,EAAE,IAAI;GACjB;EACD;IACI,KAAK,EAAE,eAAe,CAAC,UAAU;IACjC,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE,IAAI;GACjB;CACJ,CAAC","sourcesContent":["import { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\nimport { EditorMenuTypes } from './types';\n\nconst getCommandSymbols = (): {\n    mod: string;\n    option: string;\n    shift: string;\n} => {\n    const macUserAgent = /Macintosh|MacIntel|MacPPC|Mac68K/;\n    if (navigator.userAgent.match(macUserAgent)) {\n        return { mod: '⌘', option: '⌥', shift: '⇧' };\n    }\n\n    return { mod: 'Ctrl', option: 'Alt', shift: 'Shift' };\n};\n\nconst { mod, shift } = getCommandSymbols();\n\nexport const textEditorMenuItems: Array<\n    ActionBarItem<EditorMenuTypes> | ListSeparator\n> = [\n    {\n        value: EditorMenuTypes.Bold,\n        text: 'Bold',\n        commandText: `${mod} B`,\n        icon: '-lime-text-bold',\n        iconOnly: true,\n    },\n    {\n        value: EditorMenuTypes.Italic,\n        text: 'Italic',\n        commandText: `${mod} I`,\n        icon: '-lime-text-italic',\n        iconOnly: true,\n    },\n    { separator: true },\n    {\n        value: EditorMenuTypes.HeaderLevel1,\n        text: 'Header Level 1',\n        commandText: `${mod} ${shift} 1`,\n        icon: '-lime-text-h-heading-1',\n        iconOnly: true,\n    },\n    {\n        value: EditorMenuTypes.HeaderLevel2,\n        text: 'Header Level 2',\n        commandText: `${mod} ${shift} 2`,\n        icon: '-lime-text-h-heading-2',\n        iconOnly: true,\n    },\n    {\n        value: EditorMenuTypes.HeaderLevel3,\n        text: 'Header Level 3',\n        commandText: `${mod} ${shift} 3`,\n        icon: '-lime-text-h-heading-3',\n        iconOnly: true,\n    },\n    { separator: true },\n    {\n        value: EditorMenuTypes.BulletList,\n        text: 'Bullet list',\n        icon: '-lime-text-bulleted-list',\n        iconOnly: true,\n    },\n    {\n        value: EditorMenuTypes.OrderedList,\n        text: 'Numbered list',\n        icon: '-lime-text-ordered-list',\n        iconOnly: true,\n    },\n    {\n        value: EditorMenuTypes.Blockquote,\n        text: 'Blockquote',\n        icon: '-lime-text-blockquote',\n        iconOnly: true,\n    },\n];\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter/menu/types.js

@@ -0,0 +1,32 @@
+/**
+ * The `EditorMenuType` type is used to specify the type of menu items that can be added to the editor toolbar.
+ * Each one represents a different type to be used for creating the prosemirror commands relevant to the button.
+ * The values correspond to the types that can be used with the `prosemirror-commands` library.
+ * @beta
+ */
+export const EditorMenuTypes = {
+  Bold: 'strong',
+  Italic: 'em',
+  Blockquote: 'blockquote',
+  HeaderLevel1: 'headerlevel1',
+  HeaderLevel2: 'headerlevel2',
+  HeaderLevel3: 'headerlevel3',
+  Link: 'link',
+  OrderedList: 'ordered_list',
+  BulletList: 'bullet_list',
+};
+/**
+ * `LevelMapping` is used to map string identifiers to numerical header levels.
+ * It provides a way to represent different levels of headings in ProseMirror commands.
+ *
+ * The `Heading` identifier is not a valid level and is used to identify the node type.
+ * The numerical values are used for creating ProseMirror commands to set the level of a heading node in the editor.
+ * @beta
+ */
+export const LevelMapping = {
+  Heading: 'heading',
+  one: 1,
+  two: 2,
+  three: 3,
+};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/text-editor/prosemirror-adapter/menu/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG;EAC3B,IAAI,EAAE,QAAQ;EACd,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,YAAY;EACxB,YAAY,EAAE,cAAc;EAC5B,YAAY,EAAE,cAAc;EAC5B,YAAY,EAAE,cAAc;EAC5B,IAAI,EAAE,MAAM;EACZ,WAAW,EAAE,cAAc;EAC3B,UAAU,EAAE,aAAa;CAC5B,CAAC;AAKF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;EACxB,OAAO,EAAE,SAAS;EAClB,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;CACX,CAAC","sourcesContent":["/**\n * The `EditorMenuType` type is used to specify the type of menu items that can be added to the editor toolbar.\n * Each one represents a different type to be used for creating the prosemirror commands relevant to the button.\n * The values correspond to the types that can be used with the `prosemirror-commands` library.\n * @beta\n */\n\nexport const EditorMenuTypes = {\n    Bold: 'strong',\n    Italic: 'em',\n    Blockquote: 'blockquote',\n    HeaderLevel1: 'headerlevel1',\n    HeaderLevel2: 'headerlevel2',\n    HeaderLevel3: 'headerlevel3',\n    Link: 'link',\n    OrderedList: 'ordered_list',\n    BulletList: 'bullet_list',\n};\n\nexport type EditorMenuTypes =\n    (typeof EditorMenuTypes)[keyof typeof EditorMenuTypes];\n\n/**\n * `LevelMapping` is used to map string identifiers to numerical header levels.\n * It provides a way to represent different levels of headings in ProseMirror commands.\n *\n * The `Heading` identifier is not a valid level and is used to identify the node type.\n * The numerical values are used for creating ProseMirror commands to set the level of a heading node in the editor.\n * @beta\n */\nexport const LevelMapping = {\n    Heading: 'heading',\n    one: 1,\n    two: 2,\n    three: 3,\n};\n\nexport type LevelMapping = (typeof LevelMapping)[keyof typeof LevelMapping];\n\nexport type ProseMirrorAdapterElementWithFocus =\n    HTMLLimelProsemirrorAdapterElement & {\n        setFocus: () => void;\n    };\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js

@@ -5,6 +5,7 @@ import { Schema, DOMParser } from 'prosemirror-model';
 import { schema } from 'prosemirror-schema-basic';
 import { addListNodes } from 'prosemirror-schema-list';
 import { exampleSetup } from 'prosemirror-example-setup';
+import { keymap } from 'prosemirror-keymap';
 import { MenuCommandFactory } from './menu/menu-commands';
 import { textEditorMenuItems } from './menu/menu-items';
 import { markdownConverter } from '../utils/markdown-converter';
@@ -20,6 +21,7 @@ import { HTMLConverter } from '../utils/html-converter';
  */
 export class ProsemirrorAdapter {
   constructor() {
+    this.editorKeyMap = {};
     this.initializeTextEditor = async () => {
       this.actionBarItems = textEditorMenuItems;
       const mySchema = new Schema({
@@ -34,13 +36,19 @@ export class ProsemirrorAdapter {
           await this.contentConverter.parseAsHTML(this.value, schema);
       }
       const initialDoc = DOMParser.fromSchema(mySchema).parse(initialContentElement);
+      this.menuCommandFactory = new MenuCommandFactory(mySchema);
+      this.editorKeyMap = this.menuCommandFactory.buildKeymap();
+      const keymapPlugin = keymap(this.editorKeyMap);
       this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
         state: EditorState.create({
           doc: initialDoc,
-          plugins: exampleSetup({
-            schema: mySchema,
-            menuBar: false,
-          }),
+          plugins: [
+            ...exampleSetup({
+              schema: mySchema,
+              menuBar: false,
+            }),
+            keymapPlugin,
+          ],
         }),
         dispatchTransaction: (transaction) => {
           const newState = this.view.state.apply(transaction);
@@ -55,10 +63,9 @@ export class ProsemirrorAdapter {
     };
     this.handleActionBarItem = (event) => {
       event.preventDefault();
-      const { text } = event.detail;
-      const mark = text.replace(/\s/g, '').toLowerCase();
+      const { value } = event.detail;
       try {
-        const command = this.menuCommandFactory.createCommand(mark);
+        const command = this.menuCommandFactory.getCommand(value);
         this.executeCommand(command);
       }
       catch (error) {
@@ -118,7 +125,11 @@ export class ProsemirrorAdapter {
       transaction = tr;
     });
     this.view.dispatch(transaction);
-    this.view.focus();
+    this.setFocus();
+  }
+  setFocus() {
+    var _a;
+    (_a = this.view) === null || _a === void 0 ? void 0 : _a.focus();
   }
   static get is() { return "limel-prosemirror-adapter"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Prop,\n    State,\n    Watch,\n    h,\n} from '@stencil/core';\nimport { EditorState } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { Schema, DOMParser } from 'prosemirror-model';\nimport { schema } from 'prosemirror-schema-basic';\nimport { addListNodes } from 'prosemirror-schema-list';\nimport { exampleSetup } from 'prosemirror-example-setup';\nimport { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\nimport { MenuCommandFactory } from './menu/menu-commands';\nimport { textEditorMenuItems } from './menu/menu-items';\nimport { ContentTypeConverter } from '../utils/content-type-converter';\nimport { markdownConverter } from '../utils/markdown-converter';\nimport { HTMLConverter } from '../utils/html-converter';\n\n/**\n * The ProseMirror adapter offers a rich text editing experience with markdown support.\n * [Read more...](https://prosemirror.net/)\n *\n * @exampleComponent limel-example-prosemirror-adapter-basic\n * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-prosemirror-adapter',\n    shadow: true,\n    styleUrl: 'prosemirror-adapter.scss',\n})\nexport class ProsemirrorAdapter {\n    /**\n     * The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * The value of the editor, expected to be markdown\n     */\n    @Prop()\n    public value: string;\n\n    @Element()\n    private host: HTMLLimelTextEditorElement;\n\n    @State()\n    private view: EditorView;\n\n    @State()\n    private actionBarItems: Array<ActionBarItem | ListSeparator> = [];\n\n    private menuCommandFactory: MenuCommandFactory;\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    private change: EventEmitter<string>;\n\n    @Watch('value')\n    protected watchValue(newValue: string) {\n        if (\n            !this.view ||\n            newValue === this.contentConverter.serialize(this.view, schema)\n        ) {\n            return;\n        }\n\n        this.updateView(newValue);\n    }\n\n    private contentConverter: ContentTypeConverter;\n\n    public componentWillLoad() {\n        if (this.contentType === 'markdown') {\n            this.contentConverter = new markdownConverter();\n        } else if (this.contentType === 'html') {\n            this.contentConverter = new HTMLConverter();\n        }\n    }\n\n    public componentDidLoad() {\n        // Stencil complains loudly about triggering rerenders in\n        // componentDidLoad, but we have to, so we're using setTimeout to\n        // suppress the warning. /Ads\n        setTimeout(this.initializeTextEditor, 0);\n    }\n\n    public render() {\n        return [\n            <div id=\"editor\" />,\n            <limel-action-bar\n                accessibleLabel=\"Toolbar\"\n                actions={this.actionBarItems}\n                onItemSelected={this.handleActionBarItem}\n            />,\n        ];\n    }\n\n    private initializeTextEditor = async () => {\n        this.actionBarItems = textEditorMenuItems;\n\n        const mySchema = new Schema({\n            nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),\n            marks: schema.spec.marks,\n        });\n\n        // Parse initial content directly if 'value' is provided\n        const initialContentElement = document.createElement('div');\n        initialContentElement.innerHTML = '<p></p>';\n        if (this.value) {\n            initialContentElement.innerHTML =\n                await this.contentConverter.parseAsHTML(this.value, schema);\n        }\n\n        const initialDoc = DOMParser.fromSchema(mySchema).parse(\n            initialContentElement,\n        );\n\n        this.view = new EditorView(\n            this.host.shadowRoot.querySelector('#editor'),\n            {\n                state: EditorState.create({\n                    doc: initialDoc,\n                    plugins: exampleSetup({\n                        schema: mySchema,\n                        menuBar: false,\n                    }),\n                }),\n                dispatchTransaction: (transaction) => {\n                    const newState = this.view.state.apply(transaction);\n                    this.view.updateState(newState);\n\n                    this.change.emit(\n                        this.contentConverter.serialize(this.view, schema),\n                    );\n                },\n            },\n        );\n\n        this.menuCommandFactory = new MenuCommandFactory(mySchema);\n\n        if (this.value) {\n            this.updateView(this.value);\n        }\n    };\n\n    private async updateView(content: string) {\n        const html = await this.contentConverter.parseAsHTML(content, schema);\n        const prosemirrorDOMparser = DOMParser.fromSchema(\n            this.view.state.schema,\n        );\n        const domParser = new window.DOMParser();\n        const doc = domParser.parseFromString(html, 'text/html');\n        const prosemirrorDoc = prosemirrorDOMparser.parse(doc.body);\n        const tr = this.view.state.tr;\n        tr.replaceWith(0, tr.doc.content.size, prosemirrorDoc.content);\n\n        this.view.dispatch(tr);\n    }\n\n    private handleActionBarItem = (event: CustomEvent<ActionBarItem>) => {\n        event.preventDefault();\n\n        const { text } = event.detail;\n        const mark = text.replace(/\\s/g, '').toLowerCase();\n        try {\n            const command = this.menuCommandFactory.createCommand(mark);\n            this.executeCommand(command);\n        } catch (error) {\n            throw new Error(`Error executing command: ${error}`);\n        }\n    };\n\n    private executeCommand(command) {\n        const { state } = this.view;\n        const selection = state.selection;\n\n        let transaction = state.tr;\n\n        if (!selection.empty) {\n            transaction.setSelection(selection);\n        }\n\n        command(state, (tr) => {\n            transaction = tr;\n        });\n        this.view.dispatch(transaction);\n\n        this.view.focus();\n    }\n}\n"]}
+{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    Prop,\n    State,\n    Watch,\n    h,\n} from '@stencil/core';\nimport { EditorState } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { Schema, DOMParser } from 'prosemirror-model';\nimport { schema } from 'prosemirror-schema-basic';\nimport { addListNodes } from 'prosemirror-schema-list';\nimport { exampleSetup } from 'prosemirror-example-setup';\nimport { keymap } from 'prosemirror-keymap';\nimport { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\nimport { MenuCommandFactory } from './menu/menu-commands';\nimport { textEditorMenuItems } from './menu/menu-items';\nimport { ContentTypeConverter } from '../utils/content-type-converter';\nimport { markdownConverter } from '../utils/markdown-converter';\nimport { HTMLConverter } from '../utils/html-converter';\nimport { EditorMenuTypes } from './menu/types';\n\n/**\n * The ProseMirror adapter offers a rich text editing experience with markdown support.\n * [Read more...](https://prosemirror.net/)\n *\n * @exampleComponent limel-example-prosemirror-adapter-basic\n * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-prosemirror-adapter',\n    shadow: true,\n    styleUrl: 'prosemirror-adapter.scss',\n})\nexport class ProsemirrorAdapter {\n    /**\n     * The type of content that the editor should handle and emit, defaults to `markdown`\n     *\n     * Assumed to be set only once, so not reactive to changes\n     */\n    @Prop()\n    public contentType: 'markdown' | 'html' = 'markdown';\n\n    /**\n     * The value of the editor, expected to be markdown\n     */\n    @Prop()\n    public value: string;\n\n    @Element()\n    private host: HTMLLimelTextEditorElement;\n\n    @State()\n    private view: EditorView;\n\n    @State()\n    private actionBarItems: Array<\n        ActionBarItem<EditorMenuTypes> | ListSeparator\n    > = [];\n\n    private menuCommandFactory: MenuCommandFactory;\n    private editorKeyMap = {};\n\n    /**\n     * Dispatched when a change is made to the editor\n     */\n    @Event()\n    private change: EventEmitter<string>;\n\n    @Watch('value')\n    protected watchValue(newValue: string) {\n        if (\n            !this.view ||\n            newValue === this.contentConverter.serialize(this.view, schema)\n        ) {\n            return;\n        }\n\n        this.updateView(newValue);\n    }\n\n    private contentConverter: ContentTypeConverter;\n\n    public componentWillLoad() {\n        if (this.contentType === 'markdown') {\n            this.contentConverter = new markdownConverter();\n        } else if (this.contentType === 'html') {\n            this.contentConverter = new HTMLConverter();\n        }\n    }\n\n    public componentDidLoad() {\n        // Stencil complains loudly about triggering rerenders in\n        // componentDidLoad, but we have to, so we're using setTimeout to\n        // suppress the warning. /Ads\n        setTimeout(this.initializeTextEditor, 0);\n    }\n\n    public render() {\n        return [\n            <div id=\"editor\" />,\n            <limel-action-bar\n                accessibleLabel=\"Toolbar\"\n                actions={this.actionBarItems}\n                onItemSelected={this.handleActionBarItem}\n            />,\n        ];\n    }\n\n    private initializeTextEditor = async () => {\n        this.actionBarItems = textEditorMenuItems;\n\n        const mySchema = new Schema({\n            nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),\n            marks: schema.spec.marks,\n        });\n\n        // Parse initial content directly if 'value' is provided\n        const initialContentElement = document.createElement('div');\n        initialContentElement.innerHTML = '<p></p>';\n        if (this.value) {\n            initialContentElement.innerHTML =\n                await this.contentConverter.parseAsHTML(this.value, schema);\n        }\n\n        const initialDoc = DOMParser.fromSchema(mySchema).parse(\n            initialContentElement,\n        );\n\n        this.menuCommandFactory = new MenuCommandFactory(mySchema);\n\n        this.editorKeyMap = this.menuCommandFactory.buildKeymap();\n\n        const keymapPlugin = keymap(this.editorKeyMap);\n\n        this.view = new EditorView(\n            this.host.shadowRoot.querySelector('#editor'),\n            {\n                state: EditorState.create({\n                    doc: initialDoc,\n                    plugins: [\n                        ...exampleSetup({\n                            schema: mySchema,\n                            menuBar: false,\n                        }),\n                        keymapPlugin,\n                    ],\n                }),\n                dispatchTransaction: (transaction) => {\n                    const newState = this.view.state.apply(transaction);\n                    this.view.updateState(newState);\n\n                    this.change.emit(\n                        this.contentConverter.serialize(this.view, schema),\n                    );\n                },\n            },\n        );\n\n        this.menuCommandFactory = new MenuCommandFactory(mySchema);\n\n        if (this.value) {\n            this.updateView(this.value);\n        }\n    };\n\n    private async updateView(content: string) {\n        const html = await this.contentConverter.parseAsHTML(content, schema);\n        const prosemirrorDOMparser = DOMParser.fromSchema(\n            this.view.state.schema,\n        );\n        const domParser = new window.DOMParser();\n        const doc = domParser.parseFromString(html, 'text/html');\n        const prosemirrorDoc = prosemirrorDOMparser.parse(doc.body);\n        const tr = this.view.state.tr;\n        tr.replaceWith(0, tr.doc.content.size, prosemirrorDoc.content);\n\n        this.view.dispatch(tr);\n    }\n\n    private handleActionBarItem = (event: CustomEvent<ActionBarItem>) => {\n        event.preventDefault();\n\n        const { value } = event.detail;\n        try {\n            const command = this.menuCommandFactory.getCommand(value);\n            this.executeCommand(command);\n        } catch (error) {\n            throw new Error(`Error executing command: ${error}`);\n        }\n    };\n\n    private executeCommand(command) {\n        const { state } = this.view;\n        const selection = state.selection;\n\n        let transaction = state.tr;\n\n        if (!selection.empty) {\n            transaction.setSelection(selection);\n        }\n\n        command(state, (tr) => {\n            transaction = tr;\n        });\n        this.view.dispatch(transaction);\n\n        this.setFocus();\n    }\n\n    public setFocus() {\n        this.view?.focus();\n    }\n}\n"]}