@vc-shell/framework 1.0.304 → 1.0.306

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -112,14 +112,14 @@ const { closeBlade } = useBladeNavigation();
 
 const defaultMenuItems = ref([
   {
-    title: t("SHELL.ACCOUNT.CHANGE_PASSWORD"),
+    title: computed(() => t("SHELL.ACCOUNT.CHANGE_PASSWORD")),
     icon: "fas fa-key",
     clickHandler() {
       open();
     },
   },
   {
-    title: t("SHELL.ACCOUNT.LOGOUT"),
+    title: computed(() => t("SHELL.ACCOUNT.LOGOUT")),
     icon: "fas fa-sign-out-alt",
     async clickHandler() {
       const isPrevented = await closeBlade(0);

package/shared/modules/dynamic/components/fields/Table.ts

@@ -82,6 +82,18 @@ export default {
             editing: enableEditComputed.value,
             enableItemActions: !!props.element.actions,
             itemActionBuilder: actionBuilder,
+            get selectedItemId() {
+              if (
+                props.element.selectedItemId?.method &&
+                props.bladeContext.scope?.[props.element.selectedItemId?.method]
+              ) {
+                if (typeof props.bladeContext.scope?.[props.element.selectedItemId?.method] === "function") {
+                  return props.bladeContext.scope?.[props.element.selectedItemId?.method]?.();
+                } else {
+                  return props.bladeContext.scope?.[props.element.selectedItemId?.method];
+                }
+              }
+            },
             get selectedItems() {
               if (
                 props.element.selectedIds?.method &&
@@ -92,6 +104,15 @@ export default {
               }
               return [];
             },
+            onItemClick: (item: (typeof items)[number]) => {
+              if (
+                props.element.onItemClick?.method &&
+                props.bladeContext.scope?.[props.element.onItemClick?.method] &&
+                typeof props.bladeContext.scope?.[props.element.onItemClick?.method] === "function"
+              ) {
+                props.bladeContext.scope?.[props.element.onItemClick?.method](item);
+              }
+            },
             onOnEditComplete: (data: { event: { field: string; value: any }; index: number }) => {
               if (props.fieldContext) {
                 setModel({

package/shared/modules/dynamic/types/index.ts

@@ -976,6 +976,24 @@ export type TableSchema = Omit<ListContentSchema, "filter"> &
     selectedIds?: {
       method: string;
     };
+    /**
+     * Configuration for the selected table row.
+     * Method should be defined in the blade `scope`.
+     * @description Method should return a table item id.
+     * @type {string}
+     */
+    selectedItemId?: {
+      method: string;
+    };
+    /**
+     * Configuration for the table item click.
+     * Method should be defined in the blade `scope`.
+     * @description Method should return a table item id.
+     * @type {string}
+     */
+    onItemClick?: {
+      method: string;
+    };
   };
 
 /**

package/ui/components/molecules/vc-editor/vc-editor.stories.ts

@@ -1,6 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcEditor } from "./";
-import { default as Delta } from "@vueup/vue-quill/node_modules/quill-delta";
 
 export default {
   title: "molecules/VcEditor",

package/ui/components/molecules/vc-editor/vc-editor.vue

@@ -24,23 +24,20 @@
     </VcLabel>
 
     <!-- Editor field -->
-    <QuillEditor
-      :id="id"
-      :key="`${id}-${disabled}`"
-      ref="quillRef"
-      :content="modelValue"
-      class="quill-editor vc-editor__quill-editor"
-      :class="{
-        'vc-editor__quill-editor--disabled': disabled,
-      }"
-      theme="snow"
-      :toolbar="toolbar"
-      :modules="modules"
-      content-type="html"
+    <md-editor
+      ref="editorRef"
+      v-model="model"
+      language="any"
+      :editor-id="id"
+      :disabled="disabled"
       :read-only="disabled"
+      :sanitize="sanitize"
       :placeholder="placeholder"
-      :options="options"
-      @ready="initializeQuill"
+      :toolbars="toolbars"
+      no-katex
+      no-mermaid
+      class="vc-editor__editor"
+      @on-upload-img="onUploadImage"
     />
 
     <slot
@@ -55,12 +52,15 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { QuillEditor } from "@vueup/vue-quill";
-import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import { ref, unref, onMounted, onUpdated, getCurrentInstance, Ref } from "vue";
+import { ref, getCurrentInstance, Ref, computed, ComputedRef } from "vue";
 import DOMPurify from "dompurify";
-import ImageUploader from "quill-image-uploader";
 import { VcLabel, VcHint } from "../..";
+import { MdEditor, ToolbarNames, config } from "md-editor-v3";
+import "md-editor-v3/lib/style.css";
+import { useI18n } from "vue-i18n";
+import { reactiveComputed } from "@vueuse/core";
+import { tags } from "@lezer/highlight";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
 
 export interface Props {
   placeholder?: string;
@@ -74,6 +74,7 @@ export interface Props {
   multilanguage?: boolean;
   currentLanguage?: string;
   maxlength?: number;
+  toolbar?: ToolbarNames[];
 }
 
 export interface Emits {
@@ -82,104 +83,286 @@ export interface Emits {
 
 const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
+
+const { t } = useI18n({ useScope: "global" });
+
 const uid = getCurrentInstance()?.uid;
 const id = `editor-${uid}`;
 
+const editorRef = ref(null) as Ref<typeof MdEditor | null>;
 defineSlots<{
   error?: (props: any) => any;
 }>();
 
-const quillRef = ref(null) as Ref<typeof QuillEditor | null>;
-const quill = ref();
-
-const toolbar = {
-  container: [
-    { header: 1 },
-    { header: 2 },
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "link",
-    "image",
-    "blockquote",
-    { list: "ordered" },
-    { list: "bullet" },
-    { color: [] },
-    { background: [] },
-    "clean",
-  ],
-  handlers: {},
-};
-
-const options = {
-  bounds: ".quill-editor",
-};
-
-const modules = {
-  name: "imageUploader",
-  module: ImageUploader,
-  options: {
-    upload: async (file: File) => {
-      const formData = new FormData();
-      formData.append("image", file);
-
-      const result = await fetch(`/api/assets?folderUrl=/${props.assetsFolder}`, {
-        method: "POST",
-        body: formData,
-      });
-
-      const response = await result.json();
-      if (response) {
-        return response[0].url;
-      }
+const tagColors = [
+  { tag: tags.comment, color: "var(--neutrals-500)" },
+  { tag: tags.lineComment, color: "var(--neutrals-500)" },
+  { tag: tags.blockComment, color: "var(--neutrals-500)" },
+  { tag: tags.docComment, color: "var(--neutrals-500)" },
+
+  { tag: tags.name, color: "var(--primary-500)" },
+  { tag: tags.variableName, color: "var(--primary-500)" },
+  { tag: tags.propertyName, color: "var(--primary-500)" },
+  { tag: tags.labelName, color: "var(--primary-500)" },
+
+  { tag: tags.typeName, color: "var(--secondary-500)" },
+  { tag: tags.tagName, color: "var(--secondary-600)" },
+  { tag: tags.namespace, color: "var(--secondary-700)" },
+
+  { tag: tags.attributeName, color: "var(--primary-600)" },
+  { tag: tags.className, color: "var(--primary-700)" },
+
+  { tag: tags.macroName, color: "var(--accent-500)" },
+
+  { tag: tags.literal, color: "var(--info-500)" },
+  { tag: tags.string, color: "var(--success-500)" },
+  { tag: tags.docString, color: "var(--success-400)" },
+  { tag: tags.character, color: "var(--success-300)" },
+  { tag: tags.attributeValue, color: "var(--success-300)" },
+
+  { tag: tags.number, color: "var(--info-500)" },
+  { tag: tags.integer, color: "var(--info-500)" },
+  { tag: tags.float, color: "var(--info-500)" },
+
+  { tag: tags.bool, color: "var(--warning-500)" },
+  { tag: tags.atom, color: "var(--warning-500)" },
+  { tag: tags.unit, color: "var(--warning-500)" },
+
+  { tag: tags.regexp, color: "var(--accent-600)" },
+  { tag: tags.escape, color: "var(--accent-500)" },
+  { tag: tags.color, color: "var(--accent-500)" },
+  { tag: tags.url, color: "var(--accent-500)" },
+
+  { tag: tags.keyword, color: "var(--primary-700)" },
+  { tag: tags.self, color: "var(--primary-700)" },
+  { tag: tags.operatorKeyword, color: "var(--primary-700)" },
+  { tag: tags.controlKeyword, color: "var(--primary-700)" },
+  { tag: tags.definitionKeyword, color: "var(--primary-700)" },
+  { tag: tags.moduleKeyword, color: "var(--primary-700)" },
+
+  { tag: tags.null, color: "var(--warning-600)" },
+
+  { tag: tags.operator, color: "var(--primary-500)" },
+  { tag: tags.derefOperator, color: "var(--primary-500)" },
+  { tag: tags.arithmeticOperator, color: "var(--primary-500)" },
+  { tag: tags.logicOperator, color: "var(--primary-500)" },
+  { tag: tags.bitwiseOperator, color: "var(--primary-500)" },
+  { tag: tags.compareOperator, color: "var(--primary-500)" },
+  { tag: tags.updateOperator, color: "var(--primary-500)" },
+  { tag: tags.definitionOperator, color: "var(--primary-500)" },
+  { tag: tags.typeOperator, color: "var(--primary-500)" },
+  { tag: tags.controlOperator, color: "var(--primary-500)" },
+
+  { tag: tags.punctuation, color: "var(--neutrals-700)" },
+  { tag: tags.separator, color: "var(--neutrals-700)" },
+  { tag: tags.bracket, color: "var(--neutrals-700)" },
+  { tag: tags.angleBracket, color: "var(--neutrals-700)" },
+  { tag: tags.squareBracket, color: "var(--neutrals-700)" },
+  { tag: tags.paren, color: "var(--neutrals-700)" },
+  { tag: tags.brace, color: "var(--neutrals-700)" },
+
+  { tag: tags.content, color: "var(--neutrals-900)" },
+
+  { tag: tags.heading, color: "var(--primary-700)" },
+  { tag: tags.heading1, color: "var(--primary-800)" },
+  { tag: tags.heading2, color: "var(--primary-700)" },
+  { tag: tags.heading3, color: "var(--primary-600)" },
+  { tag: tags.heading4, color: "var(--primary-500)" },
+  { tag: tags.heading5, color: "var(--primary-400)" },
+  { tag: tags.heading6, color: "var(--primary-300)" },
+
+  { tag: tags.contentSeparator, color: "var(--neutrals-300)" },
+
+  { tag: tags.list, color: "var(--neutrals-900)" },
+  { tag: tags.quote, color: "var(--neutrals-700)" },
+
+  { tag: tags.emphasis, color: "var(--primary-500)" },
+  { tag: tags.strong, color: "var(--primary-700)" },
+
+  { tag: tags.link, color: "var(--accent-500)" },
+
+  { tag: tags.monospace, color: "var(--neutrals-900)" },
+
+  { tag: tags.strikethrough, color: "var(--danger-500)" },
+
+  { tag: tags.inserted, color: "var(--success-500)" },
+  { tag: tags.deleted, color: "var(--danger-500)" },
+  { tag: tags.changed, color: "var(--warning-500)" },
+
+  { tag: tags.invalid, color: "var(--danger-700)" },
+
+  { tag: tags.meta, color: "var(--neutrals-600)" },
+  { tag: tags.documentMeta, color: "var(--neutrals-600)" },
+  { tag: tags.annotation, color: "var(--neutrals-600)" },
+  { tag: tags.processingInstruction, color: "var(--neutrals-600)" },
+];
+
+const myHighlightStyle = HighlightStyle.define(tagColors);
+
+const toolbars: ComputedRef<ToolbarNames[]> = computed(() =>
+  props.disabled
+    ? []
+    : props.toolbar
+      ? props.toolbar
+      : [
+          "bold",
+          "underline",
+          "italic",
+          "-",
+          "title",
+          "strikeThrough",
+          "quote",
+          "unorderedList",
+          "orderedList",
+          "-",
+          "link",
+          "image",
+          "table",
+          "-",
+          "revoke",
+          "next",
+          "-",
+          "pageFullscreen",
+          "fullscreen",
+          "preview",
+          "previewOnly",
+        ],
+);
+
+config({
+  codeMirrorExtensions: (theme, extensions) => {
+    return [syntaxHighlighting(myHighlightStyle), ...extensions];
+  },
+  editorConfig: {
+    languageUserDefined: {
+      any: reactiveComputed(() => ({
+        toolbarTips: {
+          bold: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.BOLD"),
+          underline: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.UNDERLINE"),
+          italic: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.ITALIC"),
+          strikeThrough: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.STRIKE_THROUGH"),
+          title: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.TITLE"),
+          sub: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.SUB"),
+          sup: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.SUP"),
+          quote: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.QUOTE"),
+          unorderedList: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.UNORDERED_LIST"),
+          orderedList: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.ORDERED_LIST"),
+          task: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.TASK"),
+          codeRow: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.CODE_ROW"),
+          code: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.CODE"),
+          link: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.LINK"),
+          image: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.IMAGE"),
+          table: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.TABLE"),
+          mermaid: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.MERMAID"),
+          katex: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.KATEX"),
+          revoke: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.REVOKE"),
+          next: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.NEXT"),
+          save: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.SAVE"),
+          prettier: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.PRETTIER"),
+          pageFullscreen: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.PAGE_FULLSCREEN"),
+          fullscreen: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.FULLSCREEN"),
+          preview: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.PREVIEW"),
+          previewOnly: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.PREVIEW_ONLY"),
+          htmlPreview: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.HTML_PREVIEW"),
+          catalog: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.CATALOG"),
+          github: t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.GITHUB"),
+          "-": t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.DASH"),
+          "=": t("COMPONENTS.MOLECULES.VC_EDITOR.TOOLBAR_TIPS.EQUALS"),
+        },
+        titleItem: {
+          h1: t("COMPONENTS.MOLECULES.VC_EDITOR.TITLE_ITEM.H1"),
+          h2: t("COMPONENTS.MOLECULES.VC_EDITOR.TITLE_ITEM.H2"),
+          h3: t("COMPONENTS.MOLECULES.VC_EDITOR.TITLE_ITEM.H3"),
+          h4: t("COMPONENTS.MOLECULES.VC_EDITOR.TITLE_ITEM.H4"),
+          h5: t("COMPONENTS.MOLECULES.VC_EDITOR.TITLE_ITEM.H5"),
+          h6: t("COMPONENTS.MOLECULES.VC_EDITOR.TITLE_ITEM.H6"),
+        },
+        imgTitleItem: {
+          link: t("COMPONENTS.MOLECULES.VC_EDITOR.IMG_TITLE_ITEM.LINK"),
+          upload: t("COMPONENTS.MOLECULES.VC_EDITOR.IMG_TITLE_ITEM.UPLOAD"),
+          clip2upload: t("COMPONENTS.MOLECULES.VC_EDITOR.IMG_TITLE_ITEM.CLIP2UPLOAD"),
+        },
+        linkModalTips: {
+          linkTitle: t("COMPONENTS.MOLECULES.VC_EDITOR.LINK_MODAL_TIPS.LINK_TITLE"),
+          imageTitle: t("COMPONENTS.MOLECULES.VC_EDITOR.LINK_MODAL_TIPS.IMAGE_TITLE"),
+          descLabel: t("COMPONENTS.MOLECULES.VC_EDITOR.LINK_MODAL_TIPS.DESC_LABEL"),
+          descLabelPlaceHolder: t("COMPONENTS.MOLECULES.VC_EDITOR.LINK_MODAL_TIPS.DESC_LABEL_PLACEHOLDER"),
+          urlLabel: t("COMPONENTS.MOLECULES.VC_EDITOR.LINK_MODAL_TIPS.URL_LABEL"),
+          urlLabelPlaceHolder: t("COMPONENTS.MOLECULES.VC_EDITOR.LINK_MODAL_TIPS.URL_LABEL_PLACEHOLDER"),
+          buttonOK: t("COMPONENTS.MOLECULES.VC_EDITOR.LINK_MODAL_TIPS.BUTTON_OK"),
+        },
+        clipModalTips: {
+          title: t("COMPONENTS.MOLECULES.VC_EDITOR.CLIP_MODAL_TIPS.TITLE"),
+          buttonUpload: t("COMPONENTS.MOLECULES.VC_EDITOR.CLIP_MODAL_TIPS.BUTTON_UPLOAD"),
+        },
+        copyCode: {
+          text: t("COMPONENTS.MOLECULES.VC_EDITOR.COPY_CODE.TEXT"),
+          successTips: t("COMPONENTS.MOLECULES.VC_EDITOR.COPY_CODE.SUCCESS_TIPS"),
+          failTips: t("COMPONENTS.MOLECULES.VC_EDITOR.COPY_CODE.FAIL_TIPS"),
+        },
+        mermaid: {
+          flow: t("COMPONENTS.MOLECULES.VC_EDITOR.MERMAID.FLOW"),
+          sequence: t("COMPONENTS.MOLECULES.VC_EDITOR.MERMAID.SEQUENCE"),
+          gantt: t("COMPONENTS.MOLECULES.VC_EDITOR.MERMAID.GANTT"),
+          class: t("COMPONENTS.MOLECULES.VC_EDITOR.MERMAID.CLASS"),
+          state: t("COMPONENTS.MOLECULES.VC_EDITOR.MERMAID.STATE"),
+          pie: t("COMPONENTS.MOLECULES.VC_EDITOR.MERMAID.PIE"),
+          relationship: t("COMPONENTS.MOLECULES.VC_EDITOR.MERMAID.RELATIONSHIP"),
+          journey: t("COMPONENTS.MOLECULES.VC_EDITOR.MERMAID.JOURNEY"),
+        },
+        katex: {
+          inline: t("COMPONENTS.MOLECULES.VC_EDITOR.KATEX.INLINE"),
+          block: t("COMPONENTS.MOLECULES.VC_EDITOR.KATEX.BLOCK"),
+        },
+        footer: {
+          markdownTotal: t("COMPONENTS.MOLECULES.VC_EDITOR.FOOTER.MARKDOWN_TOTAL"),
+          scrollAuto: t("COMPONENTS.MOLECULES.VC_EDITOR.FOOTER.SCROLL_AUTO"),
+        },
+      })),
     },
   },
-};
-
-onMounted(() => {
-  removeBlankClass();
 });
 
-onUpdated(() => {
-  removeBlankClass();
+const model = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  },
 });
 
-function initializeQuill() {
-  quill.value = quillRef.value?.getQuill();
-  if (props.modelValue) {
-    quill.value.root.innerHTML = DOMPurify.sanitize(unref(props.modelValue));
-  }
+async function onUploadImage(files: File[], callback: (urls: string[]) => void) {
+  const formData = new FormData();
 
-  quill.value.on("text-change", onTextChange);
-}
+  files.forEach((file) => {
+    formData.append("image", file);
+  });
 
-function removeBlankClass() {
-  // fixes quill editor placeholder visibility issue when content is not empty
-  const editor = document.getElementById(id)?.querySelector(".ql-editor.ql-blank");
-  if (editor && props.modelValue) {
-    editor.classList.remove("ql-blank");
-  }
-}
+  const result = await fetch(`/api/assets?folderUrl=/${props.assetsFolder}`, {
+    method: "POST",
+    body: formData,
+  });
 
-function onTextChange() {
-  const len = quill.value.getLength();
-  if (props.maxlength !== undefined && len > props.maxlength) {
-    quill.value.deleteText(props.maxlength, len);
-  }
+  console.log(result);
 
-  if (quill.value.getText().trim() !== props.modelValue?.trim()) {
-    if (quill.value.root.innerHTML === "<p><br></p>") {
-      emit("update:modelValue", "");
-    } else {
-      const sanitizedContent = DOMPurify.sanitize(quill.value.root.innerHTML);
-      emit("update:modelValue", sanitizedContent);
-    }
-  }
+  const response = await result.json();
+
+  callback(
+    response.map((item: any) => ({
+      url: item.url,
+      alt: item.name,
+      title: item.name,
+    })),
+  );
+}
+
+function sanitize(html: string) {
+  return DOMPurify.sanitize(html);
 }
 
 defineExpose({
-  quillRef,
+  editorRef,
 });
 </script>
 
@@ -194,73 +377,46 @@ defineExpose({
 }
 
 .vc-editor {
-  & {
-    @apply tw-flex tw-flex-col;
-  }
+  @apply tw-flex tw-flex-col;
 
-  &--disabled {
-    @apply tw-opacity-50 tw-cursor-not-allowed;
+  &--error {
+    .md-editor {
+      @apply tw-border-[color:var(--editor-border-color-error)];
+    }
   }
 
   &__label {
     @apply tw-mb-2;
   }
 
-  &__quill-editor {
-    @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-b-[var(--editor-border-radius)] tw-h-[200px];
-    transition:
-      background 0.3s,
-      color 0.3s,
-      cursor 0.3s;
-
-    &--disabled {
-      @apply tw-bg-[color:var(--editor-disabled-bg)] tw-text-[color:var(--editor-disabled-text)] tw-cursor-default;
-    }
-
-    &.vc-editor--error {
-      @apply tw-border-[color:var(--editor-border-color-error)];
-    }
-  }
-
   &__error {
     @apply tw-text-[color:var(--editor-border-color-error)] tw-mt-1;
   }
 }
 
-.quill-editor .ql-editor {
-  &.ql-blank:before {
-    color: var(--editor-placeholder-color);
-    content: attr(data-placeholder);
-    font-style: inherit;
-    left: 15px;
-    pointer-events: none;
-    position: absolute;
-    right: 15px;
-  }
-}
-
-.quill-editor {
-  & .ql-tooltip {
-    display: flex;
-    flex-flow: wrap;
-
-    &.ql-hidden {
-      display: none !important;
-    }
-  }
-}
-
-.ql-language.ql-picker .ql-picker-label:before {
-  padding-right: 18px;
-  content: attr(data-value);
-}
-
-.ql-language.ql-picker .ql-picker-item:before {
-  content: attr(data-value);
+.md-editor {
+  --md-color: var(--secondary-800);
+  --md-hover-color: var(--additional-950);
+  --md-bk-color: var(--additional-50);
+  --md-bk-color-outstand: var(--neutrals-100);
+  --md-bk-hover-color: var(--secondary-50);
+  --md-border-color: var(--neutrals-200);
+  --md-border-hover-color: var(--neutrals-400);
+  --md-border-active-color: var(--neutrals-400);
+  --md-modal-mask: rgba(0, 0, 0, 0.45);
+  --md-modal-shadow: 0px 6px 24px 2px rgba(0, 0, 0, 0.1);
+  --md-scrollbar-bg-color: var(--neutrals-200);
+  --md-scrollbar-thumb-color: rgba(0, 0, 0, 0.3);
+  --md-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.35);
+  --md-scrollbar-thumb-active-color: rgba(0, 0, 0, 0.38);
+  color: var(--md-color);
+  font-family: inherit;
+  border: 1px solid var(--md-border-color);
+  background-color: var(--md-bk-color);
+  height: 350px;
 }
 
-.ql-toolbar,
-.quill-editor {
-  border-color: var(--editor-border-color) !important;
+.ͼ15 {
+  color: var(--secondary-900);
 }
 </style>

package/ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue

@@ -34,7 +34,7 @@
               @click="toggleMenu"
             >
               <VcIcon
-                icon="fas fa-bars"
+                :icon="isExpanded ? 'fas fa-angle-double-left' : 'fas fa-angle-double-right'"
                 size="xl"
               ></VcIcon>
             </button>

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -248,7 +248,7 @@ const emit = defineEmits<{
   "update:model-value": [data: { readonly value: any; readonly dictionary?: any[]; readonly locale?: string }];
 }>();
 
-const { locale, te, t } = useI18n({ useScope: "global" });
+const { te, t } = useI18n({ useScope: "global" });
 
 const items: Ref<any[]> = ref([]);
 const loading = ref(false);
@@ -294,8 +294,8 @@ const computedProperty = computed(() => {
   }
 
   const propertyDisplayName =
-    props.displayNames?.find((displayName) => displayName.languageCode?.startsWith(locale.value as string))?.name ||
-    props.name;
+    props.displayNames?.find((displayName) => displayName.languageCode?.startsWith(props.currentLanguage as string))
+      ?.name || props.name;
   const propertyDisplayNameLocalized =
     propertyDisplayName && te(propertyDisplayName.toUpperCase())
       ? t(propertyDisplayName.toUpperCase())