@limetech/lime-elements 37.39.1 → 37.40.0

package/dist/esm/limel-prosemirror-adapter.entry.js

@@ -15907,78 +15907,114 @@ function exampleSetup(options) {
     }));
 }
 
-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',
+/**
+ * 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
+ */
+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
+ */
+const LevelMapping = {
+  Heading: 'heading',
+  one: 1,
+  two: 2,
+  three: 3,
+};
+
+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`);
   }
-  createListCommand(listType) {
-    const type = this.schema.nodes[listType];
-    if (!type) {
-      throw new Error(`List type "${listType}" 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`);
+  }
+  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,
+};
+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),
+    };
   }
 }
 
@@ -15992,14 +16028,14 @@ const getCommandSymbols = () => {
 const { mod, shift } = getCommandSymbols();
 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',
@@ -16007,21 +16043,21 @@ 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',
@@ -16029,19 +16065,19 @@ 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,
@@ -24714,6 +24750,7 @@ const ProsemirrorAdapter = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
+    this.editorKeyMap = {};
     this.initializeTextEditor = async () => {
       this.actionBarItems = textEditorMenuItems;
       const mySchema = new Schema({
@@ -24728,13 +24765,19 @@ const ProsemirrorAdapter = class {
           await this.contentConverter.parseAsHTML(this.value, schema$1);
       }
       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);
@@ -24749,10 +24792,9 @@ const ProsemirrorAdapter = class {
     };
     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) {
@@ -24812,7 +24854,11 @@ const ProsemirrorAdapter = class {
       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();
   }
   get host() { return getElement(this); }
   static get watchers() { return {