frappe-ui 0.0.87 → 0.0.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.87",
+  "version": "0.0.89",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -23,6 +23,8 @@
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.0",
+    "@tiptap/extension-color": "^2.0.0-beta.202",
+    "@tiptap/extension-highlight": "^2.0.0-beta.202",
     "@tiptap/extension-image": "^2.0.0-beta.30",
     "@tiptap/extension-link": "^2.0.0-beta.43",
     "@tiptap/extension-mention": "^2.0.0-beta.102",
@@ -32,6 +34,8 @@
     "@tiptap/extension-table-header": "^2.0.0-beta.25",
     "@tiptap/extension-table-row": "^2.0.0-beta.22",
     "@tiptap/extension-text-align": "^2.0.0-beta.31",
+    "@tiptap/extension-text-style": "^2.0.0-beta.202",
+    "@tiptap/extension-typography": "^2.0.0-beta.202",
     "@tiptap/starter-kit": "^2.0.0-beta.191",
     "@tiptap/suggestion": "^2.0.0-beta.195",
     "@tiptap/vue-3": "^2.0.0-beta.96",

package/src/components/TextEditor/FontColor.vue

@@ -0,0 +1,108 @@
+<template>
+  <Popover transition="default">
+    <template #target="{ togglePopover, isOpen }">
+      <slot
+        v-bind="{ onClick: () => togglePopover(), isActive: isOpen }"
+      ></slot>
+    </template>
+    <template #body-main>
+      <div class="p-2">
+        <div class="text-sm text-gray-700">Text Color</div>
+        <div class="mt-1 grid grid-cols-8 gap-1">
+          <Tooltip
+            class="flex"
+            v-for="color in foregroundColors"
+            :key="color.name"
+            :text="color.name"
+          >
+            <button
+              :aria-label="color.name"
+              class="flex h-5 w-5 items-center justify-center rounded border text-base"
+              :style="{
+                color: color.hex,
+              }"
+              @click="setForegroundColor(color)"
+            >
+              A
+            </button>
+          </Tooltip>
+        </div>
+        <div class="mt-2 text-sm text-gray-700">Background Color</div>
+        <div class="mt-1 grid grid-cols-8 gap-1">
+          <Tooltip
+            class="flex"
+            v-for="color in backgroundColors"
+            :key="color.name"
+            :text="color.name"
+          >
+            <button
+              :aria-label="color.name"
+              class="flex h-5 w-5 items-center justify-center rounded border text-base text-gray-900"
+              :class="!color.hex ? 'border-gray-200' : 'border-transparent'"
+              :style="{
+                backgroundColor: color.hex,
+              }"
+              @click="setBackgroundColor(color)"
+            >
+              A
+            </button>
+          </Tooltip>
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>
+<script>
+import Popover from '../Popover.vue'
+import Tooltip from '../Tooltip.vue'
+
+export default {
+  name: 'FontColor',
+  props: ['editor'],
+  components: { Popover, Tooltip },
+  methods: {
+    setBackgroundColor(color) {
+      if (color.name != 'Default') {
+        this.editor.chain().focus().toggleHighlight({ color: color.hex }).run()
+      } else {
+        this.editor.chain().focus().unsetHighlight().run()
+      }
+    },
+    setForegroundColor(color) {
+      if (color.name != 'Default') {
+        this.editor.chain().focus().setColor(color.hex).run()
+      } else {
+        this.editor.chain().focus().unsetColor().run()
+      }
+    },
+  },
+  computed: {
+    foregroundColors() {
+      // tailwind css colors, scale 600
+      return [
+        { name: 'Default', hex: '#1F272E' },
+        { name: 'Yellow', hex: '#ca8a04' },
+        { name: 'Orange', hex: '#ea580c' },
+        { name: 'Red', hex: '#dc2626' },
+        { name: 'Green', hex: '#16a34a' },
+        { name: 'Blue', hex: '#1579D0' },
+        { name: 'Purple', hex: '#9333ea' },
+        { name: 'Pink', hex: '#db2777' },
+      ]
+    },
+    backgroundColors() {
+      // tailwind css colors, scale 100
+      return [
+        { name: 'Default', hex: null },
+        { name: 'Yellow', hex: '#fef9c3' },
+        { name: 'Orange', hex: '#ffedd5' },
+        { name: 'Red', hex: '#fee2e2' },
+        { name: 'Green', hex: '#dcfce7' },
+        { name: 'Blue', hex: '#D3E9FC' },
+        { name: 'Purple', hex: '#f3e8ff' },
+        { name: 'Pink', hex: '#fce7f3' },
+      ]
+    },
+  },
+}
+</script>

package/src/components/TextEditor/Menu.vue

@@ -55,7 +55,9 @@
             <button
               class="flex rounded p-1 text-gray-800 transition-colors"
               :class="
-                button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'
+                button.isActive(editor) || componentSlotProps?.isActive
+                  ? 'bg-gray-100'
+                  : 'hover:bg-gray-100'
               "
               @click="
                 componentSlotProps?.onClick

package/src/components/TextEditor/TextEditor.vue

@@ -28,6 +28,10 @@ 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'
@@ -134,9 +138,13 @@ export default {
         TableRow,
         TableHeader,
         TableCell,
+        Typography,
         TextAlign.configure({
           types: ['heading', 'paragraph'],
         }),
+        TextStyle,
+        Color,
+        Highlight.configure({ multicolor: true }),
         Image,
         Video,
         Link.configure({
@@ -259,4 +267,9 @@ img.ProseMirror-selectednode {
   cursor: ew-resize;
   cursor: col-resize;
 }
+
+.ProseMirror mark {
+  border-radius: 3px;
+  padding: 0 2px;
+}
 </style>

package/src/components/TextEditor/TextEditorFixedMenu.vue

@@ -37,6 +37,7 @@ export default {
           'Align Left',
           'Align Center',
           'Align Right',
+          'FontColor',
           'Separator',
           'Image',
           'Video',

package/src/components/TextEditor/commands.js

@@ -12,6 +12,7 @@ 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'
@@ -127,6 +128,13 @@ export default {
     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,

package/src/components/Tooltip.vue

@@ -24,7 +24,7 @@ export default {
       default: 0.5,
     },
     placement: {
-      default: 'bottom',
+      default: 'top',
     },
     text: {
       type: String,