feat: 🎸 高亮块

bons-space · Sep 5, 2022 · a218c2e · a218c2e
1 parent 069c91f
commit a218c2e
Show file tree

Hide file tree

Showing 25 changed files with 560 additions and 90 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -23,12 +23,14 @@ declare module '@vue/runtime-core' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
+    ExtensionViewsCustomBlockView: typeof import('./src/components/extensionViews/CustomBlockView.vue')['default']
     ExtensionViewsIframeView: typeof import('./src/components/extensionViews/IframeView.vue')['default']
     ExtensionViewsImageView: typeof import('./src/components/extensionViews/ImageView.vue')['default']
     ExtensionViewsTaskItemView: typeof import('./src/components/extensionViews/TaskItemView.vue')['default']
     IconIcon: typeof import('./src/components/Icon/Icon.vue')['default']
     MenuBar: typeof import('./src/components/menuBar/Index.vue')['default']
     MenuBubble: typeof import('./src/components/menuBubble/Index.vue')['default']
+    MenuBubbleCustomBlockBubbleMenu: typeof import('./src/components/menuBubble/CustomBlockBubbleMenu.vue')['default']
     MenuBubbleImageBubbleMenu: typeof import('./src/components/menuBubble/ImageBubbleMenu.vue')['default']
     MenuBubbleLinkBubbleMenu: typeof import('./src/components/menuBubble/LinkBubbleMenu.vue')['default']
     MenuCommandsCodeBlock: typeof import('./src/components/menuCommands/CodeBlock.vue')['default']

diff --git a/package.json b/package.json
@@ -52,8 +52,8 @@
     "@tiptap/extension-text-style": "^2.0.0-beta.26",
     "@tiptap/extension-underline": "^2.0.0-beta.25",
     "@tiptap/vue-3": "^2.0.0-beta.96",
-    "highlight.js": "^11.6.0",
     "codemirror": "^5.65.8",
+    "highlight.js": "^11.6.0",
     "lowlight": "^2.7.0"
   },
   "devDependencies": {

diff --git a/preview/views/Index.vue b/preview/views/Index.vue
@@ -44,27 +44,10 @@ import {
   FormatClear,
   Fullscreen, SelectAll, CodeBlock, BulletList, OrderedList, Image, TaskList,
   Table,
-  Iframe, Gapcursor, TextStyle,
+  Iframe, Gapcursor, TextStyle, CustomBlock,
 } from '../../src/index'
 
-const content = ref(` <p>
-          Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
-        </p>
-        <pre><code class="language-javascript">for (var i=1; i <= 20; i++)
-{
-  if (i % 15 == 0)
-    console.log("FizzBuzz");
-  else if (i % 3 == 0)
-    console.log("Fizz");
-  else if (i % 5 == 0)
-    console.log("Buzz");
-  else
-    console.log(i);
-}</code></pre>
-        <p>
-          Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
-        </p>
-      \``)
+const content = ref('<div class="custom-block info"><pre><code class="language-javascript">console.log(12312321)</code></pre></div><p></p><p>大萨达</p><p></p><p>das的as</p><div class="custom-block info"><p>dsadsadsad</p></div><p></p>')
 
 const extensions = [
   Document, Text, Paragraph, Heading, Blockquote, Bold, Underline, Italic, Strike, Link, History, TextStyle,
@@ -75,6 +58,7 @@ const extensions = [
   Table.configure({ resizable: true }),
   Iframe,
   CodeBlock.configure({ languageClassPrefix: 'language-', defaultLanguage: 'plaintext', lowlight }),
+  CustomBlock,
   CodeView.configure({
     codemirror,
     codemirrorOptions: {

diff --git a/src/components/extensionViews/CustomBlockView.vue b/src/components/extensionViews/CustomBlockView.vue
@@ -0,0 +1,35 @@
+<template>
+  <node-view-wrapper
+    as="div"
+    class="custom-block"
+    :class="node?.attrs.type"
+  >
+    <!-- when image is break text or float bubble menu's position is miscalculated use el-popover instead bubble menu -->
+    <el-popover
+      placement="top"
+      :show-arrow="false"
+      trigger="hover"
+      popper-class="editor-custom-block-popper"
+    >
+      <CustomBlockBubbleMenu
+        :node="node"
+        :editor="editor"
+        :update-attrs="updateAttributes"
+      />
+      <template #reference>
+        <NodeViewContent />
+      </template>
+    </el-popover>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3';
+import { ElPopover } from 'element-plus';
+import CustomBlockBubbleMenu from '../menuBubble/CustomBlockBubbleMenu.vue'
+
+const props = defineProps(nodeViewProps)
+
+console.log(props.node)
+</script>
diff --git a/src/components/extensionViews/ImageView.vue b/src/components/extensionViews/ImageView.vue
@@ -41,7 +41,7 @@
         :visible="selected"
         :show-arrow="false"
         placement="top"
-        popper-class="el-tiptap-image-popper"
+        popper-class="editor-image-popper"
       >
         <image-bubble-menu
           :node="node"

diff --git a/src/components/menuBubble/CustomBlockBubbleMenu.vue b/src/components/menuBubble/CustomBlockBubbleMenu.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="custom-block-bubble-menu">
+    <div
+      class="custom-checkbox tips"
+      :class="[node.attrs.type === 'tips' && 'checked']"
+      @click="handleCheckboxClick('tips')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox info"
+      :class="[node.attrs.type === 'info' && 'checked']"
+      @click="handleCheckboxClick('info')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox warning"
+      :class="[node.attrs.type === 'warning' && 'checked']"
+      @click="handleCheckboxClick('warning')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox success"
+      :class="[node.attrs.type === 'success' && 'checked']"
+      @click="handleCheckboxClick('success')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox danger"
+      :class="[node.attrs.type === 'danger' && 'checked']"
+      @click="handleCheckboxClick('danger')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox color1"
+      :class="[node.attrs.type === 'color1' && 'checked']"
+      @click="handleCheckboxClick('color1')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox color2"
+      :class="[node.attrs.type === 'color2' && 'checked']"
+      @click="handleCheckboxClick('color2')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox color3"
+      :class="[node.attrs.type === 'color3' && 'checked']"
+      @click="handleCheckboxClick('color3')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox color4"
+      :class="[node.attrs.type === 'color4' && 'checked']"
+      @click="handleCheckboxClick('color4')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+    <div
+      class="custom-checkbox color5"
+      :class="[node.attrs.type === 'color5' && 'checked']"
+      @click="handleCheckboxClick('color5')"
+    >
+      <input
+        class="custom-checkbox__original"
+        type="checkbox"
+        aria-hidden="false"
+      >
+      <span class="custom-checkbox__inner" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue';
+import { nodeViewProps } from '@tiptap/vue-3';
+
+const props = defineProps({
+  editor: nodeViewProps.editor,
+  node: nodeViewProps.node,
+  updateAttrs: nodeViewProps.updateAttributes,
+})
+
+const handleCheckboxClick = (type: string) => {
+  props.updateAttrs({ type })
+}
+</script>
diff --git a/src/components/menuCommands/ColorPopover.vue b/src/components/menuCommands/ColorPopover.vue
@@ -4,7 +4,7 @@
     :disabled="isCodeViewMode"
     placement="bottom"
     trigger="click"
-    popper-class="el-tiptap-popper"
+    popper-class="editor-popper"
   >
     <div class="color-set">
       <div

diff --git a/src/components/menuCommands/FontFamilyDropdown.vue b/src/components/menuCommands/FontFamilyDropdown.vue
@@ -12,15 +12,15 @@
     />
 
     <template #dropdown>
-      <el-dropdown-menu class="el-tiptap-dropdown-menu">
+      <el-dropdown-menu class="editor-dropdown-menu">
         <el-dropdown-item
           v-for="name in fontFamilies"
           :key="name"
           :command="name"
           :class="{
-            'el-tiptap-dropdown-menu__item--active': name === activeFontFamily,
+            'editor-dropdown-menu__item--active': name === activeFontFamily,
           }"
-          class="el-tiptap-dropdown-menu__item"
+          class="editor-dropdown-menu__item"
         >
           <span
             :data-font="name"

diff --git a/src/components/menuCommands/FontSizeDropdown.vue b/src/components/menuCommands/FontSizeDropdown.vue
@@ -12,15 +12,15 @@
     />
 
     <template #dropdown>
-      <el-dropdown-menu class="el-tiptap-dropdown-menu">
+      <el-dropdown-menu class="editor-dropdown-menu">
         <!-- default size -->
         <el-dropdown-item
           :command="defaultSize"
           :class="{
-            'el-tiptap-dropdown-menu__item--active':
+            'editor-dropdown-menu__item--active':
               activeFontSize === defaultSize,
           }"
-          class="el-tiptap-dropdown-menu__item"
+          class="editor-dropdown-menu__item"
         >
           <span data-font-size="default">{{
             t('editor.extensions.FontSize.default')
@@ -32,10 +32,10 @@
           :key="fontSize"
           :command="fontSize"
           :class="{
-            'el-tiptap-dropdown-menu__item--active':
+            'editor-dropdown-menu__item--active':
               fontSize === activeFontSize,
           }"
-          class="el-tiptap-dropdown-menu__item"
+          class="editor-dropdown-menu__item"
         >
           <span :data-font-size="fontSize">{{ fontSize }}</span>
         </el-dropdown-item>

diff --git a/src/components/menuCommands/HeadingDropdown.vue b/src/components/menuCommands/HeadingDropdown.vue
@@ -2,7 +2,7 @@
   <el-dropdown
     placement="bottom"
     trigger="click"
-    popper-class="el-tiptap-dropdown-popper"
+    popper-class="editor-dropdown-popper"
     @command="toggleHeading"
   >
     <command-button
@@ -13,7 +13,7 @@
       icon="heading"
     />
     <template #dropdown>
-      <el-dropdown-menu class="el-tiptap-dropdown-menu">
+      <el-dropdown-menu class="editor-dropdown-menu">
         <el-dropdown-item
           v-for="level in [0, ...levels]"
           :key="level"
@@ -22,14 +22,14 @@
           <div
             :class="[
               {
-                'el-tiptap-dropdown-menu__item--active':
+                'editor-dropdown-menu__item--active':
                   level > 0
                     ? editor.isActive('heading', {
                       level,
                     })
                     : editor.isActive('paragraph'),
               },
-              'el-tiptap-dropdown-menu__item',
+              'editor-dropdown-menu__item',
             ]"
           >
             <template v-if="level > 0">

diff --git a/src/components/menuCommands/HighlightPopover.vue b/src/components/menuCommands/HighlightPopover.vue
@@ -4,7 +4,7 @@
     :disabled="isCodeViewMode"
     placement="bottom"
     trigger="click"
-    popper-class="el-tiptap-popper"
+    popper-class="editor-popper"
   >
     <div class="color-set">
       <div

diff --git a/src/components/menuCommands/LineHeightDropdown.vue b/src/components/menuCommands/LineHeightDropdown.vue
@@ -13,17 +13,17 @@
     <template #dropdown>
       <el-dropdown-menu
         slot="dropdown"
-        class="el-tiptap-dropdown-menu"
+        class="editor-dropdown-menu"
       >
         <el-dropdown-item
           v-for="lineHeight in lineHeights"
           :key="lineHeight"
           :command="lineHeight"
           :class="{
-            'el-tiptap-dropdown-menu__item--active':
+            'editor-dropdown-menu__item--active':
               isLineHeightActive(lineHeight),
           }"
-          class="el-tiptap-dropdown-menu__item"
+          class="editor-dropdown-menu__item"
         >
           <span>{{ lineHeight }}</span>
         </el-dropdown-item>

diff --git a/src/components/menuCommands/image/EditImageCommandButton.vue b/src/components/menuCommands/image/EditImageCommandButton.vue
@@ -12,7 +12,7 @@
       :title="t('editor.extensions.Image.control.edit_image.title')"
       :append-to-body="true"
       width="400px"
-      custom-class="el-tiptap-edit-image-dialog"
+      custom-class="editor-edit-image-dialog"
     >
       <el-form
         :model="imageAttrs"