tiptapify 0.0.4 → 0.0.6

package/src/components/Toolbar/items.ts

@@ -1,129 +1,12 @@
-import { computed, ComputedRef, Ref, ref } from "vue";
-import * as mdi from '@mdi/js'
-
-const fonts = ref([
-  {
-    name: 'Arial',
-    fontFamily: 'arial'
-  },
-  {
-    name: 'Arial Black',
-    fontFamily: 'arial black'
-  },
-  {
-    name: 'Baskerville',
-    fontFamily: 'baskerville'
-  },
-  {
-    name: 'Bodoni MT',
-    fontFamily: 'bodoni mt'
-  },
-  {
-    name: 'Brush Script MT',
-    fontFamily: 'brush script mt'
-  },
-  {
-    name: 'Calibri',
-    fontFamily: 'calibri'
-  },
-  {
-    name: 'Calisto MT',
-    fontFamily: 'calisto mt'
-  },
-  {
-    name: 'Cambria',
-    fontFamily: 'cambria'
-  },
-  {
-    name: 'Century Gothic',
-    fontFamily: 'century gothic'
-  },
-  {
-    name: 'Consolas',
-    fontFamily: 'consolas'
-  },
-  {
-    name: 'Comic Sans',
-    fontFamily: 'comic sans ms, comic sans'
-  },
-  {
-    name: 'Courier',
-    fontFamily: 'Courier'
-  },
-  {
-    name: 'Courier New',
-    fontFamily: 'courier new'
-  },
-  {
-    name: 'Cursive',
-    fontFamily: 'cursive'
-  },
-  {
-    name: 'Dejavu Sans',
-    fontFamily: 'dejavu sans'
-  },
-  {
-    name: 'Franklin Gothic',
-    fontFamily: 'franklin gothic'
-  },
-  {
-    name: 'Garamond',
-    fontFamily: 'garamond'
-  },
-  {
-    name: 'Georgia',
-    fontFamily: 'georgia'
-  },
-  {
-    name: 'Helvetica',
-    fontFamily: 'helvetica'
-  },
-  {
-    name: 'Impact',
-    fontFamily: 'impact'
-  },
-  {
-    name: 'Inter',
-    fontFamily: 'inter'
-  },
-  {
-    name: 'Monospace',
-    fontFamily: 'monospace'
-  },
-  {
-    name: 'Optima',
-    fontFamily: 'optima'
-  },
-  {
-    name: 'Segoe UI',
-    fontFamily: 'segoe ui'
-  },
-  {
-    name: 'Serif',
-    fontFamily: 'serif'
-  },
-  {
-    name: 'Tahoma',
-    fontFamily: 'tahoma'
-  },
-  {
-    name: 'Time New Roman',
-    fontFamily: 'times new roman'
-  },
-  {
-    name: 'Trebuchet MS',
-    fontFamily: 'trebuchet ms'
-  },
-  {
-    name: 'Verdana',
-    fontFamily: 'verdana'
-  },
-])
-
-interface MDIIcons {
-  [key: string]: string
-}
-const mdiIcons = mdi as MDIIcons
+import { getActionsItems } from "@tiptapify/components/Toolbar/items/actions";
+import { getAlignmentItems } from "@tiptapify/components/Toolbar/items/alignment";
+import { getFormatExtraItems } from "@tiptapify/components/Toolbar/items/formatExtra";
+import { getFormatItems } from "@tiptapify/components/Toolbar/items/format";
+import { getListItems } from "@tiptapify/components/Toolbar/items/list";
+import { getMediaItems } from "@tiptapify/components/Toolbar/items/media";
+import { getMiscItems } from "@tiptapify/components/Toolbar/items/misc";
+import { getStyleItems } from "@tiptapify/components/Toolbar/items/style";
+import { ComputedRef, Ref, ref } from "vue";
 
 interface ToolbarItemAttrs {
   [key: string]: Function | any
@@ -133,26 +16,32 @@ interface ToolbarItemProps {
   [key: string]: any
 }
 
-interface ToolbarItem {
+export interface ToolbarItem {
   name: string|number,
   tooltip: string,
   icon: string|ComputedRef<string>,
   noI18n?: boolean,
   enabled: boolean,
   modelValue?: any,
-  section?: string,
   group?: boolean,
+  toggle?: boolean,
   props?: ToolbarItemProps,
   attrs?: ToolbarItemAttrs,
-  children?: ToolbarItem[],
+  children?: ToolbarItems|ToolbarItem[],
 }
 
 export interface ToolbarItems {
   [key: string]: ToolbarItem
 }
 
+export interface ToolbarItemSection {
+  group?: boolean,
+  toggle?: boolean,
+  items: ToolbarItems,
+}
+
 export interface ToolbarItemSections {
-  [key: string]: ToolbarItems
+  [key: string]: ToolbarItemSection
 }
 
 export function toolbarItems(
@@ -162,500 +51,37 @@ export function toolbarItems(
   customHeadingLevels: Array<number>,
   toolbarLinkButton: Ref,
 ): ToolbarItemSections {
-  const headingLevels = ref([1, 2, 3, 4, 5, 6])
-  if (customHeadingLevels.length) {
-    customHeadingLevels.forEach(level => {
-      if (level <= 0 || level > 6) {
-        throw new Error('customHeadingLevels must be between 1 and 6')
-      }
-    })
-
-    headingLevels.value = customHeadingLevels
-  }
-
-  const fontSizes = [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 48, 64, 96]
-
-  const lineHeights = [1, 1.5, 2, 3, 4]
-
-  const allMenuItems: ToolbarItems = {
+  const styleItems = ref(getStyleItems(editor.value, fontMeasure, customHeadingLevels))
+  const formatItems = ref(getFormatItems(editor.value))
+  const formatExtraItems = ref(getFormatExtraItems(editor.value))
+  const alignmentItems = ref(getAlignmentItems(editor.value))
+  const listItems = ref(getListItems(editor.value))
+  const actionsItems = ref(getActionsItems(editor.value))
+  const miscItems = ref(getMiscItems(editor.value))
+  const mediaItems = ref(getMediaItems(editor.value, toolbarLinkButton))
+
+  const allMenuItems: ToolbarItemSections = {
     /**
      * todo
      *
      * font color, backgroundcolor
      * tables
      * media (image, video)
-     * unsetmarks, clearnodes
      */
-    heading: {
-      name: 'heading',
-      tooltip: 'style.heading',
-      icon: mdi.mdiFormatHeaderPound,
-      section: 'style',
-      modelValue: null,
-      enabled: true,
-      attrs: {
-        click: () => editor.value.chain().focus().setParagraph().run()
-      },
-      props: {
-        color: computed(() => editor.value.isActive('heading') ? 'primary' : ''),
-      },
-      children: headingLevels.value.map(level => {
-        return {
-          name: `H${level}`,
-          tooltip: `style.headings.h${level}`,
-          icon: mdiIcons[`mdiFormatHeader${level}`],
-          noI18n: true,
-          enabled: true,
-          props: {
-            color: computed(() => {
-              return editor.value.isActive('heading', { level }) ? 'primary' : ''
-            }),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleHeading({ level }).run()
-          }
-        }
-      })
-    },
-    fontFamily: {
-      name: 'font-family',
-      tooltip: 'style.fontFamily',
-      icon: mdi.mdiFormatFont,
-      section: 'style',
-      modelValue: null,
-      enabled: true,
-      attrs: {
-        click: () => editor.value.chain().focus().unsetFontFamily().run()
-      },
-      children: fonts.value.map((font) => {
-        return {
-          name: font.name,
-          tooltip: '',
-          icon: '',
-          enabled: true,
-          noI18n: true,
-          props: {
-            color: computed(() => editor.value.isActive('textStyle', { fontFamily: font.fontFamily }) ? 'primary' : ''),
-            style: `font-family: ${font.fontFamily};`
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().setFontFamily(font.fontFamily).run()
-          }
-        }
-      })
-    },
-    fontSize: {
-      name: 'font-size',
-      tooltip: 'style.fontSize',
-      icon: mdi.mdiFormatSize,
-      section: 'style',
-      modelValue: computed(() => editor.value.getAttributes('textStyle').fontSize || null),
-      enabled: true,
-      attrs: {
-        click: () => editor.value.chain().focus().unsetFontSize().run()
-      },
-      children: fontSizes.map((fontSize) => {
-        return {
-          name: `${fontSize}${fontMeasure}`,
-          tooltip: '',
-          icon: '',
-          enabled: true,
-          noI18n: true,
-          props: {
-            color: computed(() => editor.value.isActive('textStyle', { fontSizes: fontSize }) ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().setFontSize(`${fontSize}${fontMeasure}`).run()
-          }
-        }
-      })
-    },
-    lineHeight: {
-      name: 'line-height',
-      tooltip: 'style.lineHeight',
-      icon: mdi.mdiFormatLineHeight,
-      section: 'style',
-      modelValue: null,
-      enabled: true,
-      attrs: {
-        click: () => editor.value.chain().focus().unsetLineHeight().run()
-      },
-      children: lineHeights.map((lineHeight) => {
-        return {
-          name: lineHeight,
-          tooltip: '',
-          icon: '',
-          enabled: true,
-          noI18n: true,
-          props: {
-            color: computed(() => editor.value.isActive('textStyle', { lineHeights: lineHeight }) ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().setLineHeight(lineHeight).run()
-          }
-        }
-      })
-    },
-
-    bold: {
-      name: 'bold',
-      tooltip: 'format.bold',
-      icon: mdi.mdiFormatBold,
-      section: 'format',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleBold().run()),
-        color: computed(() => editor.value.isActive('bold') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleBold().run()
-      }
-    },
-    italic: {
-      name: 'italic',
-      tooltip: 'format.italic',
-      icon: mdi.mdiFormatItalic,
-      section: 'format',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleItalic().run()),
-        color: computed(() => editor.value.isActive('italic') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleItalic().run()
-      }
-    },
-    strike: {
-      name: 'strike',
-      tooltip: 'format.strike',
-      icon: mdi.mdiFormatStrikethroughVariant,
-      section: 'format',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleStrike().run()),
-        color: computed(() => editor.value.isActive('strike') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleStrike().run()
-      }
-    },
-    underline: {
-      name: 'underline',
-      tooltip: 'format.underline',
-      icon: mdi.mdiFormatUnderline,
-      section: 'format',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleUnderline().run()),
-        color: computed(() => editor.value.isActive('underline') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleUnderline().run()
-      }
-    },
-    highlight: {
-      name: 'highlight',
-      tooltip: 'format.highlight',
-      icon: mdi.mdiMarker,
-      section: 'format',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleHighlight().run()),
-        color: computed(() => editor.value.isActive('highlight') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleHighlight().run()
-      }
-    },
-    formatClear: {
-      name: 'format clear',
-      tooltip: 'format.formatClear',
-      icon: mdi.mdiFormatClear,
-      section: 'format',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().unsetAllMarks().run()),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run()
-      }
-    },
-
-    code: {
-      name: 'code',
-      tooltip: 'format.code',
-      icon: mdi.mdiXml,
-      section: 'format_extra',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleCode().run()),
-        color: computed(() => editor.value.isActive('code') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleCode().run()
-      }
-    },
-    codeBlock: {
-      name: 'codeblock',
-      tooltip: 'format.codeblock',
-      icon: mdi.mdiCodeBlockTags,
-      section: 'format_extra',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleCodeBlock().run()),
-        color: computed(() => editor.value.isActive('codeBlock') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleCodeBlock().run()
-      }
-    },
-    blockquote: {
-      name: 'blockquote',
-      tooltip: 'format.blockquote',
-      icon: mdi.mdiCommentQuote,
-      section: 'format_extra',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleBlockquote().run()),
-        color: computed(() => editor.value.isActive('blockquote') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleBlockquote().run()
-      }
-    },
-
-    sup: {
-      name: 'sup',
-      tooltip: 'format.sup',
-      icon: mdi.mdiFormatSuperscript,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleSuperscript().run()),
-        color: computed(() => editor.value.isActive('superscript') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleSuperscript().run()
-      }
-    },
-    sub: {
-      name: 'sub',
-      tooltip: 'format.sub',
-      icon: mdi.mdiFormatSubscript,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().toggleSubscript().run()),
-        color: computed(() => editor.value.isActive('subscript') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().toggleSubscript().run()
-      }
-    },
-
-    alignment: {
-      name: 'alignment',
-      tooltip: 'alignment',
-      icon: '',
-      section: 'alignment',
-      enabled: true,
-      group: true,
-      children: [
-        {
-          name: 'alignments.left',
-          tooltip: 'alignments.left',
-          icon: mdi.mdiFormatAlignLeft,
-          enabled: true,
-          props: {
-            color: computed(() => editor.value.isActive('text-align', { align: 'left' }) ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleTextAlign('left').run()
-          }
-        },
-        {
-          name: 'alignments.center',
-          tooltip: 'alignments.center',
-          icon: mdi.mdiFormatAlignCenter,
-          enabled: true,
-          props: {
-            color: computed(() => editor.value.isActive('text-align', { align: 'center' }) ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleTextAlign('center').run()
-          }
-        },
-        {
-          name: 'alignments.right',
-          tooltip: 'alignments.right',
-          icon: mdi.mdiFormatAlignRight,
-          enabled: true,
-          props: {
-            color: computed(() => editor.value.isActive('text-align', { align: 'right' }) ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleTextAlign('right').run()
-          }
-        },
-        {
-          name: 'alignments.justify',
-          tooltip: 'alignments.justify',
-          icon: mdi.mdiFormatAlignJustify,
-          enabled: true,
-          props: {
-            color: computed(() => editor.value.isActive('text-align', { align: 'justify' }) ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleTextAlign('justify').run()
-          }
-        },
-      ]
-    },
-
-    list: {
-      name: 'list',
-      tooltip: 'list',
-      icon: mdi.mdiFormatListGroup,
-      section: 'list',
-      enabled: true,
-      group: true,
-      children: [
-        {
-          name: 'lists.bullet',
-          tooltip: 'lists.bullet',
-          icon: mdi.mdiFormatListBulleted,
-          enabled: true,
-          props: {
-            color: computed(() => editor.value.isActive('bulletList') ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleBulletList().run()
-          }
-        },
-        {
-          name: 'lists.numbered',
-          tooltip: 'lists.numbered',
-          icon: mdi.mdiFormatListNumbered,
-          enabled: true,
-          props: {
-            color: computed(() => editor.value.isActive('orderedList') ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleOrderedList().run()
-          }
-        },
-        {
-          name: 'lists.task',
-          tooltip: 'lists.task',
-          icon: mdi.mdiFormatListChecks,
-          enabled: true,
-          props: {
-            color: computed(() => editor.value.isActive('taskList') ? 'primary' : ''),
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().toggleTaskList().run()
-          }
-        },
-        {
-          name: 'lists.indent',
-          tooltip: 'lists.indent',
-          icon: mdi.mdiFormatIndentIncrease,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.value.can().sinkListItem('listItem')),
-            active: false,
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().sinkListItem('listItem').run()
-          }
-        },
-        {
-          name: 'lists.outdent',
-          tooltip: 'lists.outdent',
-          icon: mdi.mdiFormatIndentDecrease,
-          enabled: true,
-          props: {
-            disabled: computed(() => !editor.value.can().liftListItem('listItem')),
-            active: false,
-          },
-          attrs: {
-            click: () => editor.value.chain().focus().liftListItem('listItem').run()
-          }
-        },
-      ]
-    },
-
-    link: {
-      name: 'format.link',
-      tooltip: 'format.link',
-      icon: computed(() => editor.value.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink),
-      section: 'media',
-      enabled: true,
-      props: {
-        color: computed(() => editor.value.isActive('link') ? 'primary' : ''),
-        disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
-      },
-      attrs: {
-        click: computed(() => {
-          return editor.value.isActive('link')
-            ? editor.value.chain().focus().unsetLink().run
-            : toolbarLinkButton.value?.open
-        })
-      }
-    },
-
-    undo: {
-      name: 'undo',
-      tooltip: 'action.undo',
-      icon: mdi.mdiUndo,
-      section: 'actions',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().undo().run()),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().undo().run()
-      }
-    },
-    redo: {
-      name: 'redo',
-      tooltip: 'action.redo',
-      icon: mdi.mdiRedo,
-      section: 'actions',
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.value.can().chain().focus().redo().run()),
-      },
-      attrs: {
-        click: () => editor.value.chain().focus().redo().run()
-      }
-    },
-
-    line: {
-      name: 'line',
-      tooltip: 'format.line',
-      icon: mdi.mdiMinus,
-      section: 'misc',
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.value.chain().focus().setHorizontalRule().run()
-      }
-    },
-    break: {
-      name: 'break',
-      tooltip: 'format.break',
-      icon: mdi.mdiFormatPageBreak,
-      section: 'misc',
-      enabled: true,
-      props: {},
-      attrs: {
-        click: () => editor.value.chain().focus().setHardBreak().run()
-      }
-    },
+    style: { group: true, items: styleItems.value },
+    format: { group: true, items: formatItems.value },
+    format_extra: { group: true, items: formatExtraItems.value },
+    media: { group: true, items: mediaItems.value },
+    alignment: { toggle: true, items: alignmentItems.value },
+    list: { group: true, items: listItems.value },
+    actions: { group: true, items: actionsItems.value },
+    misc: { group: true, items: miscItems.value },
   }
 
-
-
-  const pluginsList = Object.keys(allMenuItems)
+  const pluginsList: Array<string> = []
+  Object.keys(allMenuItems).forEach(section => {
+    Object.keys(allMenuItems[section]).forEach(item => pluginsList.push(item))
+  })
 
   if (items.list.length) {
     items.list.forEach(item => {
@@ -665,31 +91,42 @@ export function toolbarItems(
     })
   }
 
+  const toolbarItems: ToolbarItemSections = {}
+
   const sections = {}
-  const toolbarItems: { [key: string]: ToolbarItems } = {}
-  pluginsList.forEach(key => {
-    const item = allMenuItems[key]
 
-    if (items.list.length) {
-      item.enabled = items.list.includes(key)
-      if (items.exclude) {
-        item.enabled = !item.enabled
+  Object.keys(allMenuItems).forEach(sectionName => {
+    const section = allMenuItems[sectionName]
+    Object.keys(section.items).forEach(plugin => {
+      const item = section.items[plugin]
+
+      if (items.list.length) {
+        item.enabled = items.list.includes(plugin)
+        if (items.exclude) {
+          item.enabled = !item.enabled
+        }
       }
-    }
-    const section = item.section ?? 'misc'
-    if (typeof toolbarItems[section] === 'undefined') {
-      sections[section] = 0
-      toolbarItems[section] = {}
-    }
-    toolbarItems[section][key] = allMenuItems[key]
-    if (allMenuItems[key].enabled) {
-      sections[section]++
-    }
+
+      if (typeof toolbarItems[sectionName] === 'undefined') {
+        sections[sectionName] = 0
+        toolbarItems[sectionName] = {
+          group: section.group ?? false,
+          toggle: section.toggle ?? false,
+          items: {},
+        }
+      }
+
+      toolbarItems[sectionName].items[plugin] = item
+
+      if (item.enabled) {
+        sections[sectionName]++
+      }
+    })
   })
 
-  Object.keys(sections).forEach(key => {
-    if (sections[key] === 0) {
-      delete toolbarItems[key]
+  Object.keys(sections).forEach(sectionName => {
+    if (sections[sectionName] === 0) {
+      delete toolbarItems[sectionName]
     }
   })