pimelon-ui 0.0.98

package/src/components/TextEditor/commands.js

@@ -0,0 +1,272 @@
+import { defineAsyncComponent } from 'vue'
+import H1 from './icons/h-1.vue'
+import H2 from './icons/h-2.vue'
+import H3 from './icons/h-3.vue'
+import H4 from './icons/h-4.vue'
+import H5 from './icons/h-5.vue'
+import H6 from './icons/h-6.vue'
+import Text from './icons/text.vue'
+import Bold from './icons/bold.vue'
+import Italic from './icons/italic.vue'
+import Underline from './icons/underline.vue'
+import AlignCenter from './icons/align-center.vue'
+import AlignLeft from './icons/align-left.vue'
+import AlignRight from './icons/align-right.vue'
+import FontColor from './icons/font-color.vue'
+import ListOrdered from './icons/list-ordered.vue'
+import ListUnordered from './icons/list-unordered.vue'
+import DoubleQuotes from './icons/double-quotes-r.vue'
+import CodeView from './icons/code-view.vue'
+import Link from './icons/link.vue'
+import Image from './icons/image-add-line.vue'
+import Video from './icons/video-add-line.vue'
+import ArrowGoBack from './icons/arrow-go-back-line.vue'
+import ArrowGoForward from './icons/arrow-go-forward-line.vue'
+import Separator from './icons/separator.vue'
+import Table from './icons/table-2.vue'
+
+export default {
+  Paragraph: {
+    label: 'Paragraph',
+    icon: Text,
+    action: (editor) => editor.chain().focus().setParagraph().run(),
+    isActive: (editor) => editor.isActive('paragraph'),
+  },
+  'Heading 1': {
+    label: 'Heading 1',
+    text: 'H1',
+    icon: H1,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 1 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 1 }),
+  },
+  'Heading 2': {
+    label: 'Heading 2',
+    text: 'H2',
+    icon: H2,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 2 }),
+  },
+  'Heading 3': {
+    label: 'Heading 3',
+    text: 'H3',
+    icon: H3,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 3 }),
+  },
+  'Heading 4': {
+    label: 'Heading 4',
+    text: 'H4',
+    icon: H4,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 4 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 4 }),
+  },
+  'Heading 5': {
+    label: 'Heading 5',
+    text: 'H5',
+    icon: H5,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 5 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 5 }),
+  },
+  'Heading 6': {
+    label: 'Heading 6',
+    text: 'H6',
+    icon: H6,
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 6 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 6 }),
+  },
+  Bold: {
+    label: 'Bold',
+    icon: Bold,
+    action: (editor) => editor.chain().focus().toggleBold().run(),
+    isActive: (editor) => editor.isActive('bold'),
+  },
+  Italic: {
+    label: 'Italic',
+    icon: Italic,
+    action: (editor) => editor.chain().focus().toggleItalic().run(),
+    isActive: (editor) => editor.isActive('italic'),
+  },
+  Underline: {
+    label: 'Underline',
+    icon: Underline,
+    action: (editor) => editor.chain().focus().toggleUnderline().run(),
+    isActive: (editor) => editor.isActive('underline'),
+  },
+  'Bullet List': {
+    label: 'Bullet List',
+    icon: ListUnordered,
+    action: (editor) => editor.chain().focus().toggleBulletList().run(),
+    isActive: (editor) => editor.isActive('bulletList'),
+  },
+  'Numbered List': {
+    label: 'Numbered List',
+    icon: ListOrdered,
+    action: (editor) => editor.chain().focus().toggleOrderedList().run(),
+    isActive: (editor) => editor.isActive('orderedList'),
+  },
+  'Align Center': {
+    label: 'Align Center',
+    icon: AlignCenter,
+    action: (editor) => editor.chain().focus().setTextAlign('center').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'center' }),
+  },
+  'Align Left': {
+    label: 'Align Left',
+    icon: AlignLeft,
+    action: (editor) => editor.chain().focus().setTextAlign('left').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'left' }),
+  },
+  'Align Right': {
+    label: 'Align Right',
+    icon: AlignRight,
+    action: (editor) => editor.chain().focus().setTextAlign('right').run(),
+    isActive: (editor) => editor.isActive({ textAlign: 'right' }),
+  },
+  FontColor: {
+    label: 'Font Color',
+    icon: FontColor,
+    isActive: (editor) =>
+      editor.isActive('textStyle') || editor.isActive('highlight'),
+    component: defineAsyncComponent(() => import('./FontColor.vue')),
+  },
+  Blockquote: {
+    label: 'Blockquote',
+    icon: DoubleQuotes,
+    action: (editor) => editor.chain().focus().toggleBlockquote().run(),
+    isActive: (editor) => editor.isActive('blockquote'),
+  },
+  Code: {
+    label: 'Code',
+    icon: CodeView,
+    action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+    isActive: (editor) => editor.isActive('codeBlock'),
+  },
+  'Horizontal Rule': {
+    label: 'Horizontal Rule',
+    icon: Separator,
+    action: (editor) => editor.chain().focus().setHorizontalRule().run(),
+    isActive: (editor) => false,
+  },
+  Link: {
+    label: 'Link',
+    icon: Link,
+    isActive: (editor) => editor.isActive('link'),
+    component: defineAsyncComponent(() => import('./InsertLink.vue')),
+  },
+  Image: {
+    label: 'Image',
+    icon: Image,
+    isActive: (editor) => false,
+    component: defineAsyncComponent(() => import('./InsertImage.vue')),
+  },
+  Video: {
+    label: 'Video',
+    icon: Video,
+    isActive: (editor) => false,
+    component: defineAsyncComponent(() => import('./InsertVideo.vue')),
+  },
+  Undo: {
+    label: 'Undo',
+    icon: ArrowGoBack,
+    action: (editor) => editor.chain().focus().undo().run(),
+    isActive: (editor) => false,
+  },
+  Redo: {
+    label: 'Redo',
+    icon: ArrowGoForward,
+    action: (editor) => editor.chain().focus().redo().run(),
+    isActive: (editor) => false,
+  },
+  InsertTable: {
+    label: 'Insert Table',
+    icon: Table,
+    action: (editor) =>
+      editor
+        .chain()
+        .focus()
+        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+        .run(),
+    isActive: (editor) => false,
+  },
+  AddColumnBefore: {
+    label: 'Add Column Before',
+    action: (editor) => editor.chain().focus().addColumnBefore().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().addColumnBefore(),
+  },
+  AddColumnAfter: {
+    label: 'Add Column After',
+    action: (editor) => editor.chain().focus().addColumnAfter().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().addColumnAfter(),
+  },
+  DeleteColumn: {
+    label: 'Delete Column',
+    action: (editor) => editor.chain().focus().deleteColumn().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().deleteColumn(),
+  },
+  AddRowBefore: {
+    label: 'Add Row Before',
+    action: (editor) => editor.chain().focus().addRowBefore().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().addRowBefore(),
+  },
+  AddRowAfter: {
+    label: 'Add Row After',
+    action: (editor) => editor.chain().focus().addRowAfter().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().addRowAfter(),
+  },
+  DeleteRow: {
+    label: 'Delete Row',
+    action: (editor) => editor.chain().focus().deleteRow().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().deleteRow(),
+  },
+  DeleteTable: {
+    label: 'Delete Table',
+    action: (editor) => editor.chain().focus().deleteTable().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().deleteTable(),
+  },
+  MergeCells: {
+    label: 'Merge Cells',
+    action: (editor) => editor.chain().focus().mergeCells().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().mergeCells(),
+  },
+  SplitCell: {
+    label: 'Split Cell',
+    action: (editor) => editor.chain().focus().splitCell().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().splitCell(),
+  },
+  ToggleHeaderColumn: {
+    label: 'Toggle Header Column',
+    action: (editor) => editor.chain().focus().toggleHeaderColumn().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().toggleHeaderColumn(),
+  },
+  ToggleHeaderRow: {
+    label: 'Toggle Header Row',
+    action: (editor) => editor.chain().focus().toggleHeaderRow().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().toggleHeaderRow(),
+  },
+  ToggleHeaderCell: {
+    label: 'Toggle Header Cell',
+    action: (editor) => editor.chain().focus().toggleHeaderCell().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().toggleHeaderCell(),
+  },
+  Separator: {
+    type: 'separator',
+  },
+}

package/src/components/TextEditor/icons/align-center.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M3 4h18v2H3V4zm2 15h14v2H5v-2zm-2-5h18v2H3v-2zm2-5h14v2H5V9z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/align-justify.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M3 4h18v2H3V4zm0 15h18v2H3v-2zm0-5h18v2H3v-2zm0-5h18v2H3V9z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/align-left.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M3 4h18v2H3V4zm0 15h14v2H3v-2zm0-5h18v2H3v-2zm0-5h14v2H3V9z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/align-right.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M3 4h18v2H3V4zm4 15h14v2H7v-2zm-4-5h18v2H3v-2zm4-5h14v2H7V9z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/arrow-go-back-line.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M5.828 7l2.536 2.536L6.95 10.95 2 6l4.95-4.95 1.414 1.414L5.828 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H5.828z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/arrow-go-forward-line.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M18.172 7H11a6 6 0 1 0 0 12h9v2h-9a8 8 0 1 1 0-16h7.172l-2.536-2.536L17.05 1.05 22 6l-4.95 4.95-1.414-1.414L18.172 7z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/bold.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M8 11h4.5a2.5 2.5 0 1 0 0-5H8v5zm10 4.5a4.5 4.5 0 0 1-4.5 4.5H6V4h6.5a4.5 4.5 0 0 1 3.256 7.606A4.498 4.498 0 0 1 18 15.5zM8 13v5h5.5a2.5 2.5 0 1 0 0-5H8z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/code-view.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M16.95 8.464l1.414-1.414 4.95 4.95-4.95 4.95-1.414-1.414L20.485 12 16.95 8.464zm-9.9 0L3.515 12l3.535 3.536-1.414 1.414L.686 12l4.95-4.95L7.05 8.464z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/double-quotes-r.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M19.417 6.679C20.447 7.773 21 9 21 10.989c0 3.5-2.457 6.637-6.03 8.188l-.893-1.378c3.335-1.804 3.987-4.145 4.247-5.621-.537.278-1.24.375-1.929.311-1.804-.167-3.226-1.648-3.226-3.489a3.5 3.5 0 0 1 3.5-3.5c1.073 0 2.099.49 2.748 1.179zm-10 0C10.447 7.773 11 9 11 10.989c0 3.5-2.457 6.637-6.03 8.188l-.893-1.378c3.335-1.804 3.987-4.145 4.247-5.621-.537.278-1.24.375-1.929.311C4.591 12.322 3.17 10.841 3.17 9a3.5 3.5 0 0 1 3.5-3.5c1.073 0 2.099.49 2.748 1.179z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/font-color.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M15.246 14H8.754l-1.6 4H5l6-15h2l6 15h-2.154l-1.6-4zm-.8-2L12 5.885 9.554 12h4.892zM3 20h18v2H3v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/format-clear.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M12.651 14.065L11.605 20H9.574l1.35-7.661-7.41-7.41L4.93 3.515 20.485 19.07l-1.414 1.414-6.42-6.42zm-.878-6.535l.27-1.53h-1.8l-2-2H20v2h-5.927L13.5 9.257 11.773 7.53z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-1.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M13 20h-2v-7H4v7H2V4h2v7h7V4h2v16zm8-12v12h-2v-9.796l-2 .536V8.67L19.5 8H21z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-2.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M4 4v7h7V4h2v16h-2v-7H4v7H2V4h2zm14.5 4c2.071 0 3.75 1.679 3.75 3.75 0 .857-.288 1.648-.772 2.28l-.148.18L18.034 18H22v2h-7v-1.556l4.82-5.546c.268-.307.43-.709.43-1.148 0-.966-.784-1.75-1.75-1.75-.918 0-1.671.707-1.744 1.606l-.006.144h-2C14.75 9.679 16.429 8 18.5 8z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-3.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M22 8l-.002 2-2.505 2.883c1.59.435 2.757 1.89 2.757 3.617 0 2.071-1.679 3.75-3.75 3.75-1.826 0-3.347-1.305-3.682-3.033l1.964-.382c.156.806.866 1.415 1.718 1.415.966 0 1.75-.784 1.75-1.75s-.784-1.75-1.75-1.75c-.286 0-.556.069-.794.19l-1.307-1.547L19.35 10H15V8h7zM4 4v7h7V4h2v16h-2v-7H4v7H2V4h2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-4.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M13 20h-2v-7H4v7H2V4h2v7h7V4h2v16zm9-12v8h1.5v2H22v2h-2v-2h-5.5v-1.34l5-8.66H22zm-2 3.133L17.19 16H20v-4.867z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-5.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M22 8v2h-4.323l-.464 2.636c.33-.089.678-.136 1.037-.136 2.21 0 4 1.79 4 4s-1.79 4-4 4c-1.827 0-3.367-1.224-3.846-2.897l1.923-.551c.24.836 1.01 1.448 1.923 1.448 1.105 0 2-.895 2-2s-.895-2-2-2c-.63 0-1.193.292-1.56.748l-1.81-.904L16 8h6zM4 4v7h7V4h2v16h-2v-7H4v7H2V4h2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/h-6.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M21.097 8l-2.598 4.5c2.21 0 4.001 1.79 4.001 4s-1.79 4-4 4-4-1.79-4-4c0-.736.199-1.426.546-2.019L18.788 8h2.309zM4 4v7h7V4h2v16h-2v-7H4v7H2V4h2zm14.5 10.5c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/image-add-line.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M21 15v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2zm.008-12c.548 0 .992.445.992.993V13h-2V5H4v13.999L14 9l3 3v2.829l-3-3L6.827 19H14v2H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016zM8 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/italic.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M15 20H7v-2h2.927l2.116-12H9V4h8v2h-2.927l-2.116 12H15z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/link.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M18.364 15.536L16.95 14.12l1.414-1.414a5 5 0 1 0-7.071-7.071L9.879 7.05 8.464 5.636 9.88 4.222a7 7 0 0 1 9.9 9.9l-1.415 1.414zm-2.828 2.828l-1.415 1.414a7 7 0 0 1-9.9-9.9l1.415-1.414L7.05 9.88l-1.414 1.414a5 5 0 1 0 7.071 7.071l1.414-1.414 1.415 1.414zm-.708-10.607l1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/list-ordered.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M8 4h13v2H8V4zM5 3v3h1v1H3V6h1V4H3V3h2zM3 14v-2.5h2V11H3v-1h3v2.5H4v.5h2v1H3zm2 5.5H3v-1h2V18H3v-1h3v4H3v-1h2v-.5zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/list-unordered.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M8 4h13v2H8V4zM4.5 6.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 6.9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM8 11h13v2H8v-2zm0 7h13v2H8v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/readme.md

@@ -0,0 +1 @@
+Icons from https://remixicon.com/

package/src/components/TextEditor/icons/separator.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M2 11h2v2H2v-2zm4 0h12v2H6v-2zm14 0h2v2h-2v-2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/strikethrough.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M17.154 14c.23.516.346 1.09.346 1.72 0 1.342-.524 2.392-1.571 3.147C14.88 19.622 13.433 20 11.586 20c-1.64 0-3.263-.381-4.87-1.144V16.6c1.52.877 3.075 1.316 4.666 1.316 2.551 0 3.83-.732 3.839-2.197a2.21 2.21 0 0 0-.648-1.603l-.12-.117H3v-2h18v2h-3.846zm-4.078-3H7.629a4.086 4.086 0 0 1-.481-.522C6.716 9.92 6.5 9.246 6.5 8.452c0-1.236.466-2.287 1.397-3.153C8.83 4.433 10.271 4 12.222 4c1.471 0 2.879.328 4.222.984v2.152c-1.2-.687-2.515-1.03-3.946-1.03-2.48 0-3.719.782-3.719 2.346 0 .42.218.786.654 1.099.436.313.974.562 1.613.75.62.18 1.297.414 2.03.699z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/components/TextEditor/icons/table-2.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M13 10v4h6v-4h-6zm-2 0H5v4h6v-4zm2 9h6v-3h-6v3zm-2 0v-3H5v3h6zm2-14v3h6V5h-6zm-2 0H5v3h6V5zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"
+      fill="currentColor"
+    />
+  </svg>
+</template>