@radio-garden/ditojs-admin 2.85.2-0.5067ad799

package/src/types/DitoTypeMarkup.vue

@@ -0,0 +1,700 @@
+<template lang="pug">
+.dito-markup(:id="dataPath")
+  .dito-buttons.dito-buttons--toolbar(
+    v-if="groupedButtons.length > 0"
+  )
+    .dito-buttons__group(
+      v-for="buttons in groupedButtons"
+    )
+      button.dito-button(
+        v-for="{ name, icon, isActive, onClick } in buttons"
+        :key="name"
+        :class="{ 'dito-button--active': isActive }"
+        @click="onClick"
+      )
+        DitoIcon(:name="icon")
+  EditorContent.dito-markup-editor(
+    ref="editor"
+    :editor="editor"
+    :style="styles"
+  )
+  .dito-resize(
+    v-if="resizable"
+    @mousedown.stop.prevent="onDragResize"
+  )
+</template>
+
+<script>
+import DitoTypeComponent from '../DitoTypeComponent.js'
+import DomMixin from '../mixins/DomMixin.js'
+import { getSchemaAccessor } from '../utils/accessor.js'
+// Tiptap:
+import { Editor, EditorContent, Mark, getMarkAttributes } from '@tiptap/vue-3'
+import { Slice, Fragment } from '@tiptap/pm/model'
+// Essentials:
+import { Document } from '@tiptap/extension-document'
+import { Text } from '@tiptap/extension-text'
+// Marks:
+import { Bold } from '@tiptap/extension-bold'
+import { Code } from '@tiptap/extension-code'
+import { Italic } from '@tiptap/extension-italic'
+import { Link } from '@tiptap/extension-link'
+import { Strike } from '@tiptap/extension-strike'
+import { Subscript } from '@tiptap/extension-subscript'
+import { Superscript } from '@tiptap/extension-superscript'
+import { Underline } from '@tiptap/extension-underline'
+// Nodes:
+import { Blockquote } from '@tiptap/extension-blockquote'
+import { CodeBlock } from '@tiptap/extension-code-block'
+import { HardBreak } from '@tiptap/extension-hard-break'
+import { Heading } from '@tiptap/extension-heading'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
+import { OrderedList } from '@tiptap/extension-ordered-list'
+import { BulletList } from '@tiptap/extension-bullet-list'
+import { ListItem } from '@tiptap/extension-list-item'
+import { Footnotes, FootnoteReference, Footnote } from 'tiptap-footnotes'
+// TODO:
+// import { Image } from '@tiptap/extension-image'
+// import { Mention } from '@tiptap/extension-mention'
+// import { CodeBlockHighlight } from '@tiptap/extension-code-block-highlight'
+// import { Table } from '@tiptap/extension-table'
+// import { TableCell } from '@tiptap/extension-table-cell'
+// import { TableHeader } from '@tiptap/extension-table-header'
+// import { TableNodes } from '@tiptap/extension-table-nodes'
+// import { TableRow } from '@tiptap/extension-table-row'
+// import { TaskList } from '@tiptap/extension-task-list'
+// import { TaskItem } from '@tiptap/extension-task-item'
+// Tools:
+import { History } from '@tiptap/extension-history'
+
+import { DitoIcon } from '@ditojs/ui/src'
+import { isArray, isObject, hyphenate, debounce, camelize } from '@ditojs/utils'
+
+// @vue/component
+export default DitoTypeComponent.register('markup', {
+  mixins: [DomMixin],
+  components: {
+    EditorContent,
+    DitoIcon
+  },
+
+  data() {
+    return {
+      editor: null,
+      height: null
+    }
+  },
+
+  computed: {
+    lines() {
+      return this.schema.lines || 10
+    },
+
+    hardBreak() {
+      return !!this.schema.hardBreak
+    },
+
+    styles() {
+      return {
+        height: this.height || `calc(${this.lines}em * var(--line-height))`
+      }
+    },
+
+    markButtons() {
+      return this.getButtons('marks', {
+        bold: true,
+        italic: true,
+        underline: true,
+        strike: true,
+        small: true,
+        code: true,
+        subscript: true,
+        superscript: true,
+        link: {
+          onClick: editor => this.onClickLink(editor)
+        }
+      })
+    },
+
+    basicNodeButtons() {
+      return this.getButtons('nodes', {
+        paragraph: {
+          command: 'setParagraph'
+        },
+        heading: {
+          attribute: 'level',
+          values: [1, 2, 3, 4, 5, 6]
+        }
+      })
+    },
+
+    advancedNodeButtons() {
+      return this.getButtons('nodes', {
+        bulletList: true,
+        orderedList: true,
+        blockquote: true,
+        codeBlock: true
+      })
+    },
+
+    toolButtons() {
+      return this.getButtons('tools', {
+        undo: true,
+        redo: true,
+        footnotes: {
+          command: 'addFootnote'
+        }
+      })
+    },
+
+    groupedButtons() {
+      return [
+        this.markButtons,
+        this.basicNodeButtons,
+        this.advancedNodeButtons,
+        this.toolButtons
+      ].filter(buttons => buttons.length > 0)
+    },
+
+    parseOptions() {
+      return {
+        preserveWhitespace: {
+          'collapse': false,
+          'preserve': true,
+          'preserve-all': 'full'
+        }[this.whitespace]
+      }
+    },
+
+    editorOptions() {
+      return {
+        editable: !this.readyonly,
+        autoFocus: this.autofocus,
+        disableInputRules: !this.enableRules.input,
+        disablePasteRules: !this.enableRules.paste,
+        parseOptions: this.parseOptions,
+        editorProps: this.hardBreak
+          ? {
+              handlePaste: (view, event, slice) => {
+                const nodes = []
+
+                slice.content.forEach((node, offset, index) => {
+                  if (index > 0 && node.type.name === 'paragraph') {
+                    // Add hard break between paragraphs
+                    nodes.push(view.state.schema.nodes.hardBreak.create())
+                  }
+
+                  // Extract content from paragraphs, keep other nodes as-is
+                  if (node.type.name === 'paragraph') {
+                    node.content.forEach(child => nodes.push(child))
+                  } else {
+                    nodes.push(node)
+                  }
+                })
+
+                const paragraph = view.state.schema.nodes.paragraph.create(
+                  null,
+                  Fragment.from(nodes)
+                )
+
+                view.dispatch(
+                  view.state.tr.replaceSelection(
+                    new Slice(Fragment.from(paragraph), 0, 0)
+                  )
+                )
+
+                return true
+              }
+            }
+          : {}
+      }
+    },
+
+    resizable: getSchemaAccessor('resizable', {
+      type: Boolean,
+      default: false
+    }),
+
+    whitespace: getSchemaAccessor('whitespace', {
+      type: String,
+      default: 'collapse'
+      // Possible values are: 'collapse', 'preserve', 'preserve-all'
+    }),
+
+    enableRules: getSchemaAccessor('enableRules', {
+      type: [Object, Boolean],
+      default: false,
+      get(enableRules) {
+        return isObject(enableRules)
+          ? enableRules
+          : {
+              input: !!enableRules,
+              paste: !!enableRules
+            }
+      }
+    })
+  },
+
+  watch: {
+    readyonly: 'updateEditorOptions',
+    autofocus: 'updateEditorOptions',
+    enableRules: 'updateEditorOptions'
+  },
+
+  created() {
+    let changed = false
+    let ignoreWatch = false
+
+    const onFocus = () => this.onFocus()
+
+    const onBlur = () => {
+      this.onBlur()
+      updateValue()
+    }
+
+    const onUpdate = () => {
+      setValueDebounced()
+      this.onInput()
+    }
+
+    const setValueDebounced = debounce(() => {
+      ignoreWatch = true
+      updateValue()
+    }, 100)
+
+    const updateValue = () => {
+      const content = this.editor.getHTML()
+      const value = this.hardBreak
+        ? content.replace(/^<p>(.*?)<\/p>$/s, '$1')
+        : content
+      if (value !== this.value) {
+        changed = true
+        this.value = value
+      }
+      if (!this.focused && changed) {
+        this.onChange()
+        changed = false
+      }
+    }
+
+    this.$watch('value', value => {
+      if (ignoreWatch) {
+        ignoreWatch = false
+      } else {
+        const content = this.hardBreak
+          ? `<p>${value}</p>`
+          : value
+        this.editor.commands.setContent(content, {
+          emitUpdate: false,
+          parseOptions: this.parseOptions
+        })
+      }
+    })
+
+    this.editor = new Editor({
+      ...this.editorOptions,
+      onFocus,
+      onBlur,
+      onUpdate,
+      extensions: this.getExtensions(),
+      content: this.value || ''
+    })
+  },
+
+  unmounted() {
+    this.editor.destroy()
+  },
+
+  methods: {
+    onDragResize(event) {
+      const getPoint = ({ clientX: x, clientY: y }) => ({ x, y })
+
+      let prevY = getPoint(event).y
+      let height = parseFloat(getComputedStyle(this.$refs.editor.$el).height)
+
+      const mousemove = event => {
+        const { y } = getPoint(event)
+        height += y - prevY
+        prevY = y
+        this.height = `${Math.max(height, 0)}px`
+      }
+
+      const handlers = this.domOn(document, {
+        mousemove,
+
+        mouseup(event) {
+          mousemove(event)
+          handlers.remove()
+        }
+      })
+    },
+
+    updateEditorOptions() {
+      this.editor.setOptions(this.editorOptions)
+    },
+
+    async onClickLink(editor) {
+      const attributes = await this.rootComponent.showDialog({
+        components: {
+          DitoIcon,
+          href: {
+            type: 'url',
+            label: 'Link',
+            autofocus: true
+          },
+          title: {
+            type: 'text',
+            label: 'Title'
+          }
+        },
+        buttons: {
+          cancel: {},
+          apply: { type: 'submit' },
+          remove: {
+            events: {
+              click({ dialogComponent }) {
+                dialogComponent.resolve(null)
+              }
+            }
+          }
+        },
+        data: getMarkAttributes(this.editor.state, 'link')
+      })
+      if (attributes) {
+        let { href, title } = attributes
+        if (href) {
+          // See if `href` can be parsed as a URL, and if not,
+          // prefix it with a default protocol.
+          try {
+            new URL(href)
+          } catch {
+            href = `https://${href}`
+          }
+        }
+        editor.commands.setLink({ href, title })
+      } else if (attributes === null) {
+        editor.commands.unsetLink()
+      }
+    },
+
+    getExtensions() {
+      const {
+        marks = {},
+        nodes = {},
+        tools = {}
+      } = this.schema
+      return [
+        // Essentials:
+        tools.footnotes
+          ? Document.extend({ content: 'block+ footnotes?' })
+          : Document,
+
+        Text,
+        Paragraph, // button can be controlled, but node needs to be on.
+
+        // Marks: `schema.marks`
+        marks.bold && Bold,
+        marks.italic && Italic,
+        marks.underline && Underline,
+        marks.strike && Strike,
+        marks.small && Small,
+        marks.code && Code,
+        marks.subscript && Superscript,
+        marks.superscript && Subscript,
+        marks.link && LinkWithTitle,
+
+        // Nodes: `schema.nodes`
+        nodes.blockquote && Blockquote,
+        nodes.codeBlock && CodeBlock,
+        nodes.heading && Heading.configure({ levels: nodes.heading }),
+        nodes.horizontalRule && HorizontalRule,
+        (nodes.orderedList || nodes.bulletList) && ListItem,
+        nodes.bulletList && BulletList,
+        nodes.orderedList && OrderedList,
+
+        // Footnotes:
+        ...(tools.footnotes ? [Footnotes, Footnote, FootnoteReference] : []),
+
+        // TODO:
+        // nodes.todoList && TodoItem,
+        // nodes.todoList && TodoList,
+
+        // Tools: `schema.tools`
+        tools.history && History,
+
+        HardBreak.extend({
+          addKeyboardShortcuts: () => {
+            const setHardBreak = () => this.editor.commands.setHardBreak()
+            return {
+              'Mod-Enter': setHardBreak,
+              'Shift-Enter': setHardBreak,
+              ...(this.hardBreak ? { Enter: setHardBreak } : null)
+            }
+          }
+        })
+      ].filter(extension => !!extension)
+    },
+
+    getButtons(settingsName, descriptions) {
+      const list = []
+      const { commands } = this.editor
+
+      const addButton = ({ name, icon, command, attributes, onClick }) => {
+        list.push({
+          name,
+          icon,
+          isActive: this.editor.isActive(name, attributes),
+          onClick: () => {
+            command ??=
+              name in commands
+                ? name
+                : `toggle${camelize(name, true)}`
+            if (command in commands) {
+              const apply = attributes =>
+                this.editor.chain()[command](attributes).focus().run()
+              onClick
+                ? onClick(this.editor, attributes)
+                : apply(attributes)
+            }
+          }
+        })
+      }
+
+      const settings = this.schema[settingsName]
+      if (settings) {
+        for (const [name, description] of Object.entries(descriptions)) {
+          const settingName = ['undo', 'redo'].includes(name) ? 'history' : name
+          const setting = settings[settingName]
+          const icon = hyphenate(name)
+          if (setting) {
+            if (description === true) {
+              addButton({ name, icon })
+            } else if (isObject(description)) {
+              const { command, attribute, values, onClick } = description
+              if (attribute) {
+                if (isArray(values) && isArray(setting)) {
+                  // Support heading level attrs:
+                  for (const value of values) {
+                    if (setting.includes(value)) {
+                      addButton({
+                        name,
+                        icon: `${icon}-${value}`,
+                        command,
+                        attributes: { [attribute]: value },
+                        onClick
+                      })
+                    }
+                  }
+                }
+              } else {
+                addButton({ name, icon, command, onClick })
+              }
+            }
+          }
+        }
+      }
+      return list
+    },
+
+    focusElement() {
+      this.editor.commands.focus()
+    },
+
+    blurElement() {
+      this.editor.commands.blur()
+    }
+  }
+})
+
+const Small = Mark.create({
+  name: 'small',
+
+  parseHTML() {
+    return [{ tag: 'small' }]
+  },
+
+  renderHTML() {
+    return ['small', 0]
+  },
+
+  addCommands() {
+    return {
+      setSmall:
+        attributes =>
+        ({ commands }) => {
+          return commands.setMark(this.name, attributes)
+        },
+      toggleSmall:
+        attributes =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name, attributes)
+        },
+      unsetSmall:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name)
+        }
+    }
+  }
+})
+
+const LinkWithTitle = Link.extend({
+  inclusive: false,
+
+  addAttributes() {
+    return {
+      href: {
+        default: null
+      },
+      title: {
+        default: null
+      }
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a',
+        getAttrs: element => ({
+          href: element.getAttribute('href'),
+          title: element.getAttribute('title')
+        })
+      }
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['a', HTMLAttributes, 0]
+  }
+})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-markup {
+  @extend %input;
+
+  position: relative;
+
+  .ProseMirror {
+    height: 100%;
+    outline: none;
+  }
+
+  .dito-markup-editor {
+    overflow-y: scroll;
+    margin-top: $input-padding-ver;
+    // Move padding "inside" editor to correctly position scrollbar
+    margin-right: -$input-padding-hor;
+    padding-right: $input-padding-hor;
+  }
+
+  .dito-buttons--toolbar {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  p,
+  ul,
+  ol,
+  pre,
+  blockquote {
+    margin: 1rem 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-weight: bold;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  code {
+    font-family: $font-family-mono;
+  }
+
+  pre {
+    padding: 0.7rem 1rem;
+    border-radius: $border-radius;
+    background: $color-darker;
+    color: $color-white;
+    overflow-x: auto;
+
+    code {
+      display: block;
+    }
+  }
+
+  p code {
+    display: inline-block;
+    padding: 0 0.3rem;
+    border-radius: $border-radius;
+    background: $color-lighter;
+  }
+
+  a {
+    pointer-events: none;
+    cursor: default;
+    color: blue;
+    text-decoration: underline;
+  }
+
+  ul,
+  ol {
+    padding-left: 2rem;
+  }
+
+  li {
+    & > p,
+    & > ol,
+    & > ul {
+      margin: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid $color-lighter;
+    padding-left: 1em;
+    font-style: italic;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ol.footnotes {
+    margin-top: 1em;
+    padding: 1em 0;
+    list-style-type: decimal;
+    padding-left: 2em;
+
+    &:has(li) {
+      border-top: 1px solid $color-light;
+    }
+  }
+}
+</style>