refactor: editor code block to be extensible by plugins

ui/packages/editor/package.json

@@ -47,7 +47,6 @@
     "@tiptap/extension-bullet-list": "^2.6.5",
     "@tiptap/extension-code": "^2.6.5",
     "@tiptap/extension-code-block": "^2.6.5",
-    "@tiptap/extension-code-block-lowlight": "^2.6.5",
     "@tiptap/extension-color": "^2.6.5",
     "@tiptap/extension-document": "^2.6.5",
     "@tiptap/extension-dropcursor": "^2.6.5",
@@ -80,9 +79,7 @@
     "@tiptap/vue-3": "^2.6.5",
     "floating-vue": "^5.2.2",
     "github-markdown-css": "^5.2.0",
-    "highlight.js": "11.8.0",
     "linkifyjs": "^4.1.3",
-    "lowlight": "^3.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tippy.js": "^6.3.7"
   },

ui/packages/editor/src/dev/App.vue

@@ -45,7 +45,6 @@ import {
   ExtensionUnderline,
   ExtensionVideo,
   RichTextEditor,
-  lowlight,
   useEditor,
 } from "../index";
 
@@ -99,9 +98,7 @@ const editor = useEditor({
     ExtensionVideo,
     ExtensionAudio,
     ExtensionCommands,
-    ExtensionCodeBlock.configure({
-      lowlight,
-    }),
+    ExtensionCodeBlock,
     ExtensionIframe,
     ExtensionColor,
     ExtensionFontSize,

ui/packages/editor/src/extensions/code-block/CodeBlockSelect.vue

@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+import { computed, defineProps, ref, watch } from "vue";
+import IconArrowDownLine from "~icons/ri/arrow-down-s-line";
+import { Dropdown as VDropdown } from "floating-vue";
+
+export interface Option {
+  label: string;
+  value: string;
+}
+const props = defineProps<{
+  container?: any;
+  containerClass?: string;
+  options: Option[];
+  filterSort?: (options: Option[], query: string) => number;
+}>();
+
+const value = defineModel({
+  default: "",
+});
+
+const emit = defineEmits<{
+  (event: "select"): void;
+}>();
+
+const isFocus = ref(false);
+const inputValue = ref<string>("");
+const selectedOption = ref<Option | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const displayLabel = computed(() => {
+  if (selectedOption.value) {
+    return selectedOption.value.label;
+  }
+  return value.value;
+});
+
+const filterOptions = computed(() => {
+  if (!inputValue.value) {
+    return props.options;
+  }
+  return props.options.filter((option) =>
+    option.value
+      .toLocaleLowerCase()
+      .includes(inputValue.value.toLocaleLowerCase())
+  );
+});
+
+const handleInputFocus = () => {
+  isFocus.value = true;
+  setTimeout(() => {
+    handleScrollIntoView();
+  }, 50);
+};
+
+const handleInputBlur = () => {
+  isFocus.value = false;
+  if (inputValue.value) {
+    value.value = inputValue.value;
+    inputValue.value = "";
+  }
+};
+
+const handleSelectOption = (option: Option) => {
+  selectedOption.value = option;
+  value.value = option.value;
+  inputValue.value = "";
+  inputRef.value?.blur();
+  emit("select");
+};
+
+const selectedIndex = ref(-1);
+
+const handleOptionKeydown = (event: KeyboardEvent) => {
+  const key = event.key;
+  if (key === "ArrowUp") {
+    selectedIndex.value =
+      (selectedIndex.value - 1 + filterOptions.value.length) %
+      filterOptions.value.length;
+    return true;
+  }
+
+  if (key === "ArrowDown") {
+    selectedIndex.value =
+      (selectedIndex.value + 1) % filterOptions.value.length;
+    return true;
+  }
+
+  if (key === "Enter") {
+    if (selectedIndex.value === -1) {
+      return true;
+    }
+    handleSelectOption(filterOptions.value[selectedIndex.value]);
+    return true;
+  }
+};
+
+watch(
+  value,
+  (newValue) => {
+    if (newValue) {
+      selectedOption.value =
+        props.options.find((option) => option.value === newValue) || null;
+      selectedIndex.value = props.options.findIndex(
+        (option) => option.value === newValue
+      );
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  selectedIndex,
+  () => {
+    setTimeout(() => {
+      handleScrollIntoView();
+    });
+  },
+  {
+    immediate: true,
+  }
+);
+
+const handleScrollIntoView = () => {
+  if (selectedIndex.value === -1) {
+    return;
+  }
+  const optionElement = document.querySelector(
+    `.select > div:nth-child(${selectedIndex.value + 1})`
+  );
+  if (optionElement) {
+    optionElement.scrollIntoView({
+      behavior: "instant",
+      block: "nearest",
+      inline: "nearest",
+    });
+  }
+};
+</script>
+<template>
+  <VDropdown
+    :triggers="[]"
+    :shown="isFocus"
+    :auto-hide="false"
+    :distance="0"
+    auto-size
+    :container="container || 'body'"
+  >
+    <div class="relative inline-block w-full" @keydown="handleOptionKeydown">
+      <div class="h-8">
+        <div
+          class="select-input w-full h-full grid items-center text-sm rounded-md px-3 cursor-pointer box-border"
+          :class="{
+            'bg-white': isFocus,
+            'border-[1px]': isFocus,
+          }"
+        >
+          <span class="absolute top-0 bottom-0">
+            <input
+              ref="inputRef"
+              v-model="inputValue"
+              class="appearance-none bg-transparent h-full ps-0 pe-0 border-none outline-none m-0 p-0 cursor-auto"
+              :placeholder="isFocus ? displayLabel : ''"
+              @focus="handleInputFocus"
+              @blur="handleInputBlur"
+            />
+          </span>
+          <span v-show="!isFocus" class="text-ellipsis text-sm">
+            {{ displayLabel }}
+          </span>
+          <span class="justify-self-end" @click="inputRef?.focus()">
+            <IconArrowDownLine />
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <template #popper>
+      <div class="bg-white">
+        <div class="select max-h-64 cursor-pointer p-1">
+          <template v-if="filterOptions && filterOptions.length > 0">
+            <div
+              v-for="(option, index) in filterOptions"
+              :key="option.value"
+              :index="index"
+              class="w-full h-8 flex items-center rounded-md text-base px-3 py-1 hover:bg-zinc-100"
+              :class="{
+                'bg-zinc-200': option.value === value,
+                'bg-zinc-100': selectedIndex === index,
+              }"
+              @mousedown="handleSelectOption(option)"
+            >
+              <span class="flex-1 text-ellipsis text-sm">
+                {{ option.label }}
+              </span>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              class="w-full h-8 flex items-center rounded-md text-base px-3 py-1"
+            >
+              <span class="flex-1 text-ellipsis text-sm">No options</span>
+            </div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </VDropdown>
+</template>
+<style lang="scss" scoped>
+.select-input {
+  grid-template-columns: 1fr auto;
+}
+</style>

ui/packages/editor/src/extensions/code-block/CodeBlockViewRenderer.vue

@@ -1,40 +1,80 @@
 <script lang="ts" setup>
 import { i18n } from "@/locales";
-import type { Decoration, Node as ProseMirrorNode } from "@/tiptap/pm";
-import type { Editor, Node } from "@/tiptap/vue-3";
-import { NodeViewContent, NodeViewWrapper } from "@/tiptap/vue-3";
+import {
+  NodeViewContent,
+  NodeViewWrapper,
+  type NodeViewProps,
+} from "@/tiptap/vue-3";
 import { useTimeout } from "@vueuse/core";
 import { computed } from "vue";
 import BxBxsCopy from "~icons/bx/bxs-copy";
 import RiArrowDownSFill from "~icons/ri/arrow-down-s-fill";
 import RiArrowRightSFill from "~icons/ri/arrow-right-s-fill";
 import IconCheckboxCircle from "~icons/ri/checkbox-circle-line";
-import lowlight from "./lowlight";
+import CodeBlockSelect from "./CodeBlockSelect.vue";
 
-const props = defineProps<{
-  editor: Editor;
-  node: ProseMirrorNode;
-  decorations: Decoration[];
-  selected: boolean;
-  extension: Node<any, any>;
-  getPos: () => number;
-  updateAttributes: (attributes: Record<string, any>) => void;
-  deleteNode: () => void;
-}>();
+const props = defineProps<NodeViewProps>();
 
-const languages = computed(() => {
-  return lowlight.listLanguages();
+const languageOptions = computed(() => {
+  let languages: Array<{
+    label: string;
+    value: string;
+  }> = [];
+  const lang = props.extension.options.languages;
+  if (typeof lang === "function") {
+    languages = lang(props.editor.state);
+  } else {
+    languages = lang;
+  }
+  languages = languages || [];
+  const languageValues = languages.map((language) => language.value);
+  if (languageValues.indexOf("auto") === -1) {
+    languages.unshift({
+      label: "Auto",
+      value: "auto",
+    });
+  }
+  return languages;
 });
 
 const selectedLanguage = computed({
   get: () => {
-    return props.node?.attrs.language;
+    return props.node?.attrs.language || "auto";
   },
   set: (language: string) => {
     props.updateAttributes({ language: language });
   },
 });
 
+const themeOptions = computed(() => {
+  let themes:
+    | Array<{
+        label: string;
+        value: string;
+      }>
+    | undefined = [];
+  const theme = props.extension.options.themes;
+  if (typeof theme === "function") {
+    themes = theme(props.editor.state);
+  } else {
+    themes = theme;
+  }
+
+  if (!themes) {
+    return undefined;
+  }
+  return themes;
+});
+
+const selectedTheme = computed({
+  get: () => {
+    return props.node?.attrs.theme || themeOptions.value?.[0].value;
+  },
+  set: (theme: string) => {
+    props.updateAttributes({ theme: theme });
+  },
+});
+
 const collapsed = computed<boolean>({
   get: () => {
     return props.node.attrs.collapsed || false;
@@ -76,19 +116,23 @@ const handleCopyCode = () => {
             <RiArrowDownSFill v-else />
           </div>
         </div>
-        <select
+        <CodeBlockSelect
           v-model="selectedLanguage"
-          class="block !leading-8 text-sm text-gray-900 border select-none border-transparent rounded-md bg-transparent focus:ring-blue-500 focus:border-blue-500 cursor-pointer hover:bg-zinc-200"
+          class="w-48"
+          :container="editor.options.element"
+          :options="languageOptions"
+          @select="editor.commands.focus()"
         >
-          <option :value="null">auto</option>
-          <option
-            v-for="(language, index) in languages"
-            :key="index"
-            :value="language"
-          >
-            {{ language }}
-          </option>
-        </select>
+        </CodeBlockSelect>
+        <CodeBlockSelect
+          v-if="themeOptions && themeOptions.length > 0"
+          v-model="selectedTheme"
+          :container="editor.options.element"
+          class="w-48"
+          :options="themeOptions"
+          @select="editor.commands.focus()"
+        >
+        </CodeBlockSelect>
       </div>
       <div class="pr-3 flex items-center">
         <div