pimelon-ui 0.0.98

package/src/components/TextEditor/Menu.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="inline-flex bg-white px-1 py-1">
+    <div class="inline-flex items-center gap-1">
+      <template v-for="button in buttons" :key="button.label">
+        <div
+          class="h-4 w-[2px] border-l"
+          v-if="button.type === 'separator'"
+        ></div>
+        <div class="shrink-0" v-else-if="button.map">
+          <Popover>
+            <template #target="{ togglePopover }">
+              <button
+                class="rounded px-2 py-1 text-base font-medium text-gray-800 transition-colors hover:bg-gray-100"
+                @click="togglePopover"
+                :set="
+                  (activeBtn =
+                    button.find((b) => b.isActive(editor)) || button[0])
+                "
+              >
+                <component
+                  v-if="activeBtn.icon"
+                  :is="activeBtn.icon"
+                  class="h-4 w-4"
+                />
+                <span v-else>
+                  {{ activeBtn.label }}
+                </span>
+              </button>
+            </template>
+            <template #body="{ close }">
+              <ul class="rounded border bg-white p-1 shadow-md">
+                <li
+                  class="w-full"
+                  v-for="option in button"
+                  v-show="option.isDisabled ? !option.isDisabled(editor) : true"
+                >
+                  <button
+                    class="w-full rounded px-2 py-1 text-left text-base hover:bg-gray-50"
+                    @click="
+                      () => {
+                        onButtonClick(option)
+                        close()
+                      }
+                    "
+                  >
+                    {{ option.label }}
+                  </button>
+                </li>
+              </ul>
+            </template>
+          </Popover>
+        </div>
+        <component v-else :is="button.component || 'div'" v-bind="{ editor }">
+          <template v-slot="componentSlotProps">
+            <button
+              class="flex rounded p-1 text-gray-800 transition-colors"
+              :class="
+                button.isActive(editor) || componentSlotProps?.isActive
+                  ? 'bg-gray-100'
+                  : 'hover:bg-gray-100'
+              "
+              @click="
+                componentSlotProps?.onClick
+                  ? componentSlotProps.onClick(button)
+                  : onButtonClick(button)
+              "
+              :title="button.label"
+            >
+              <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+              <span
+                class="inline-block h-4 min-w-[1rem] text-sm leading-4"
+                v-else
+              >
+                {{ button.text }}
+              </span>
+            </button>
+          </template>
+        </component>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import Popover from '../Popover.vue'
+
+export default {
+  name: 'TipTapMenu',
+  props: ['buttons'],
+  inject: ['editor'],
+  components: {
+    Popover,
+  },
+  methods: {
+    onButtonClick(button) {
+      button.action(this.editor)
+    },
+  },
+}
+</script>

package/src/components/TextEditor/TextEditor.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="relative w-full" :class="$attrs.class" v-if="editor">
+    <TextEditorBubbleMenu :buttons="bubbleMenu" />
+    <TextEditorFixedMenu
+      class="w-full overflow-x-auto rounded-t-lg border border-gray-200"
+      :buttons="fixedMenu"
+    />
+    <TextEditorFloatingMenu :buttons="floatingMenu" />
+    <slot name="top" />
+    <slot name="editor" :editor="editor">
+      <editor-content :editor="editor" />
+    </slot>
+    <slot name="bottom" />
+  </div>
+</template>
+
+<script>
+import { normalizeClass } from 'vue'
+import { computed } from '@vue/reactivity'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import TextAlign from '@tiptap/extension-text-align'
+import Table from '@tiptap/extension-table'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import TableRow from '@tiptap/extension-table-row'
+import Image from './image-extension'
+import Video from './video-extension'
+import Link from '@tiptap/extension-link'
+import Typography from '@tiptap/extension-typography'
+import TextStyle from '@tiptap/extension-text-style'
+import Highlight from '@tiptap/extension-highlight'
+import { Color } from '@tiptap/extension-color'
+import configureMention from './mention'
+import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
+import TextEditorBubbleMenu from './TextEditorBubbleMenu.vue'
+import TextEditorFloatingMenu from './TextEditorFloatingMenu.vue'
+import { detectMarkdown, markdownToHTML } from '../../utils/markdown'
+import { DOMParser } from 'prosemirror-model'
+
+export default {
+  name: 'TextEditor',
+  inheritAttrs: false,
+  components: {
+    EditorContent,
+    TextEditorFixedMenu,
+    TextEditorBubbleMenu,
+    TextEditorFloatingMenu,
+  },
+  props: {
+    content: {
+      type: String,
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    editorClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+    bubbleMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    fixedMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    floatingMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    extensions: {
+      type: Array,
+      default: () => [],
+    },
+    starterkitOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    mentions: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ['change'],
+  expose: ['editor'],
+  provide() {
+    return {
+      editor: computed(() => this.editor),
+    }
+  },
+  data() {
+    return {
+      editor: null,
+    }
+  },
+  watch: {
+    content(val) {
+      let currentHTML = this.editor.getHTML()
+      if (currentHTML !== val) {
+        this.editor.commands.setContent(val)
+      }
+    },
+    editable(value) {
+      this.editor.setEditable(value)
+    },
+    editorProps: {
+      deep: true,
+      handler(value) {
+        if (this.editor) {
+          this.editor.setOptions({
+            editorProps: value,
+          })
+        }
+      },
+    },
+  },
+  mounted() {
+    this.editor = new Editor({
+      content: this.content || null,
+      editorProps: this.editorProps,
+      editable: this.editable,
+      extensions: [
+        StarterKit.configure({
+          ...this.starterkitOptions,
+        }),
+        Table.configure({
+          resizable: true,
+        }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        Typography,
+        TextAlign.configure({
+          types: ['heading', 'paragraph'],
+        }),
+        TextStyle,
+        Color,
+        Highlight.configure({ multicolor: true }),
+        Image,
+        Video,
+        Link.configure({
+          openOnClick: false,
+        }),
+        Placeholder.configure({
+          showOnlyWhenEditable: false,
+          placeholder: () => {
+            return this.placeholder
+          },
+        }),
+        configureMention(this.mentions),
+        ...(this.extensions || []),
+      ],
+      onUpdate: ({ editor }) => {
+        this.$emit('change', editor.getHTML())
+      },
+    })
+  },
+  beforeUnmount() {
+    this.editor.destroy()
+    this.editor = null
+  },
+  computed: {
+    editorProps() {
+      return {
+        attributes: {
+          class: normalizeClass([
+            'prose prose-p:my-1 prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100',
+            this.editorClass,
+          ]),
+        },
+        clipboardTextParser: (text, $context) => {
+          if (!detectMarkdown(text)) return
+          if (
+            !confirm(
+              'Do you want to convert markdown content to HTML before pasting?'
+            )
+          )
+            return
+
+          let dom = document.createElement('div')
+          dom.innerHTML = markdownToHTML(text)
+          let parser =
+            this.editor.view.someProp('clipboardParser') ||
+            this.editor.view.someProp('domParser') ||
+            DOMParser.fromSchema(this.editor.schema)
+          return parser.parseSlice(dom, {
+            preserveWhitespace: true,
+            context: $context,
+          })
+        },
+      }
+    },
+  },
+}
+</script>
+<style>
+.ProseMirror {
+  outline: none;
+  caret-color: theme('colors.blue.600');
+  word-break: break-word;
+}
+
+/* Firefox */
+.ProseMirror-focused:focus-visible {
+  outline: none;
+}
+
+/* Placeholder */
+.ProseMirror:not(.ProseMirror-focused) p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: theme('colors.gray.500');
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror-selectednode video,
+img.ProseMirror-selectednode {
+  border: 2px solid theme('colors.blue.300');
+}
+
+/* Mentions */
+.mention {
+  font-weight: 600;
+  box-decoration-break: clone;
+}
+
+/* Table styles */
+.prose table p {
+  margin: 0;
+}
+
+/* Prosemirror specific table styles */
+.ProseMirror table .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background: theme('colors.blue.200');
+  opacity: 0.3;
+}
+
+.ProseMirror table .column-resize-handle {
+  position: absolute;
+  right: -1px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  background-color: theme('colors.blue.200');
+  pointer-events: none;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror mark {
+  border-radius: 3px;
+  padding: 0 2px;
+}
+</style>

package/src/components/TextEditor/TextEditorBubbleMenu.vue

@@ -0,0 +1,69 @@
+<template>
+  <BubbleMenu
+    v-if="bubbleMenuButtons"
+    class="bubble-menu rounded-md shadow-sm"
+    :tippy-options="{ duration: 100 }"
+    :editor="editor"
+  >
+    <Menu
+      class="rounded-md border border-gray-100 shadow-lg"
+      :buttons="bubbleMenuButtons"
+    />
+  </BubbleMenu>
+</template>
+<script>
+import { BubbleMenu } from '@tiptap/vue-3'
+import { createEditorButton } from './utils'
+import Menu from './Menu.vue'
+
+export default {
+  name: 'TextEditorBubbleMenu',
+  props: ['buttons'],
+  components: { BubbleMenu, Menu },
+  inject: ['editor'],
+  computed: {
+    bubbleMenuButtons() {
+      if (!this.buttons) return false
+
+      let buttons
+      if (Array.isArray(this.buttons)) {
+        buttons = this.buttons
+      } else {
+        buttons = [
+          'Paragraph',
+          'Heading 2',
+          'Heading 3',
+          'Separator',
+          'Bold',
+          'Italic',
+          'Link',
+          'Separator',
+          'Bullet List',
+          'Numbered List',
+          'Separator',
+          'Image',
+          'Video',
+          'Blockquote',
+          'Code',
+          [
+            'InsertTable',
+            'AddColumnBefore',
+            'AddColumnAfter',
+            'DeleteColumn',
+            'AddRowBefore',
+            'AddRowAfter',
+            'DeleteRow',
+            'MergeCells',
+            'SplitCell',
+            'ToggleHeaderColumn',
+            'ToggleHeaderRow',
+            'ToggleHeaderCell',
+            'DeleteTable',
+          ],
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+  },
+}
+</script>

package/src/components/TextEditor/TextEditorFixedMenu.vue

@@ -0,0 +1,72 @@
+<template>
+  <Menu v-if="fixedMenuButtons" :buttons="fixedMenuButtons" />
+</template>
+<script>
+import Menu from './Menu.vue'
+import { createEditorButton } from './utils'
+
+export default {
+  name: 'TextEditorFixedMenu',
+  props: ['buttons'],
+  components: { Menu },
+  inject: ['editor'],
+  computed: {
+    fixedMenuButtons() {
+      if (!this.buttons) return false
+      let buttons
+      if (Array.isArray(this.buttons)) {
+        buttons = this.buttons
+      } else {
+        buttons = [
+          [
+            'Heading 1',
+            'Heading 2',
+            'Heading 3',
+            'Heading 4',
+            'Heading 5',
+            'Heading 6',
+          ],
+          'Paragraph',
+          'Separator',
+          'Bold',
+          'Italic',
+          'Separator',
+          'Bullet List',
+          'Numbered List',
+          'Separator',
+          'Align Left',
+          'Align Center',
+          'Align Right',
+          'FontColor',
+          'Separator',
+          'Image',
+          'Video',
+          'Link',
+          'Blockquote',
+          'Code',
+          'Horizontal Rule',
+          [
+            'InsertTable',
+            'AddColumnBefore',
+            'AddColumnAfter',
+            'DeleteColumn',
+            'AddRowBefore',
+            'AddRowAfter',
+            'DeleteRow',
+            'MergeCells',
+            'SplitCell',
+            'ToggleHeaderColumn',
+            'ToggleHeaderRow',
+            'ToggleHeaderCell',
+            'DeleteTable',
+          ],
+          'Separator',
+          'Undo',
+          'Redo',
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+  },
+}
+</script>

package/src/components/TextEditor/TextEditorFloatingMenu.vue

@@ -0,0 +1,55 @@
+<template>
+  <FloatingMenu
+    v-if="floatingMenuButtons"
+    :tippy-options="{ duration: 100 }"
+    :editor="editor"
+    class="flex"
+  >
+    <button
+      v-for="button in floatingMenuButtons"
+      :key="button.label"
+      class="flex rounded p-1 text-gray-800 transition-colors"
+      :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
+      @click="() => button.action(editor)"
+      :title="button.label"
+    >
+      <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+      <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
+        {{ button.text }}
+      </span>
+    </button>
+  </FloatingMenu>
+</template>
+<script>
+import { FloatingMenu } from '@tiptap/vue-3'
+import { createEditorButton } from './utils'
+
+export default {
+  name: 'TextEditorFloatingMenu',
+  props: ['buttons'],
+  components: { FloatingMenu },
+  inject: ['editor'],
+  computed: {
+    floatingMenuButtons() {
+      if (!this.buttons) return false
+
+      let buttons
+      if (Array.isArray(this.buttons)) {
+        buttons = this.buttons
+      } else {
+        buttons = [
+          'Paragraph',
+          'Heading 2',
+          'Heading 3',
+          'Bullet List',
+          'Numbered List',
+          'Blockquote',
+          'Code',
+          'Horizontal Rule',
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+  },
+}
+</script>