classcard-ui 0.2.1486 → 0.2.1487

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1486",
+  "version": "0.2.1487",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CEditor/CEditor.vue

@@ -7,7 +7,7 @@
     <quill-editor
       ref="myQuillEditor"
       :class="`mt-1 rounded-md bg-white ${
-        disabled ? 'opacity-50 cursor-not-allowed' : ''
+        disabled ? 'cursor-not-allowed opacity-50' : ''
       } text-sm shadow-sm`"
       :value="content"
       :options="editorOption"
@@ -23,45 +23,62 @@
     </p>
   </div>
 </template>
+
 <script>
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
 import { quillEditor } from "vue-quill-editor";
+import {
+  EDITOR_FONT_WHITELIST,
+  buildEditorFontCss,
+} from "./quill-font-setup";
+
+const FONT_STYLE_ID = "c-editor-font-styles";
+export { EDITOR_FONT_WHITELIST };
+
 export default {
   name: "CEditor",
   components: { quillEditor },
   props: {
-    id: {
-      type: String,
-    },
-    content: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    hint: {
-      type: String,
-    },
-    helpText: {
-      type: String,
-    },
-    toolbarOptions: {
-      type: Array,
-    },
-    onEditorChange: {
-      type: Function,
-    },
-    placeholder: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    id: { type: String },
+    content: { type: String },
+    label: { type: String },
+    hint: { type: String },
+    helpText: { type: String },
+    toolbarOptions: { type: Array, default: () => [] },
+    onEditorChange: { type: Function },
+    placeholder: { type: String },
+    disabled: { type: Boolean, default: false },
   },
   methods: {
+    /**
+     * Quill toolbar font options are separate from the attributor whitelist.
+     * Sync any font control to EDITOR_FONT_WHITELIST so custom fonts appear and apply.
+     */
+    normalizeToolbarOptions(toolbarOptions) {
+      if (!Array.isArray(toolbarOptions) || !JSON.stringify(toolbarOptions).includes('"font"')) {
+        return toolbarOptions;
+      }
+
+      return toolbarOptions.map((group) => {
+        if (!Array.isArray(group)) return group;
+
+        return group.map((item) => {
+          if (item === "font") {
+            return { font: EDITOR_FONT_WHITELIST };
+          }
+          if (
+            item &&
+            typeof item === "object" &&
+            Object.prototype.hasOwnProperty.call(item, "font")
+          ) {
+            return { font: EDITOR_FONT_WHITELIST };
+          }
+          return item;
+        });
+      });
+    },
     onChange(params) {
       this.$emit("onEditorChange", params);
     },
@@ -83,27 +100,34 @@ export default {
       return {
         modules: {
           toolbar: {
-            container: this.toolbarOptions,
+            container: this.normalizeToolbarOptions(this.toolbarOptions),
           },
         },
         placeholder: this.placeholder,
       };
     },
   },
+  mounted() {
+    if (document.getElementById(FONT_STYLE_ID)) return;
+
+    const style = document.createElement("style");
+    style.id = FONT_STYLE_ID;
+    style.textContent = buildEditorFontCss();
+    document.head.appendChild(style);
+  },
 };
 </script>
+
 <style>
 .ql-toolbar.ql-snow {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
 }
-
 .ql-container.ql-snow {
   border-bottom-left-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
   min-height: 5rem;
 }
-
 .ql-editor {
   @apply text-sm text-gray-900;
   max-height: 150px;
@@ -111,4 +135,4 @@ export default {
 .ql-editor.ql-blank::before {
   @apply not-italic text-gray-500;
 }
-</style>
+</style>

package/src/components/CEditor/index.js

@@ -1,3 +1,7 @@
-import CEditor from './CEditor.vue'
+import CEditor from "./CEditor.vue";
 
-export default CEditor
+export default CEditor;
+export {
+  EDITOR_FONT_WHITELIST,
+  EDITOR_FONT_FAMILIES,
+} from "./quill-font-setup";

package/src/components/CEditor/quill-font-setup.js

@@ -0,0 +1,134 @@
+import { Quill } from "vue-quill-editor";
+
+/** Short keys used by your toolbar option arrays */
+export const EDITOR_FONT_WHITELIST = [
+  "sans-serif",
+  "serif",
+  "monospace",
+  "comic-sans",
+  "verdana",
+];
+
+/** Fully resolved font stacks mapped to each key */
+export const EDITOR_FONT_FAMILIES = {
+  "sans-serif": 'Arial, Helvetica, sans-serif',
+  "serif": 'Georgia, "Times New Roman", serif',
+  "monospace": '"Courier New", Courier, monospace',
+  "comic-sans": 'Comic Sans MS, cursive',
+  "verdana": 'Verdana, Geneva, sans-serif',
+};
+
+const cleanStack = (stack) => String(stack || "").replace(/["']/g, "");
+
+const CLEANED_FONT_STACKS = Object.fromEntries(
+  Object.entries(EDITOR_FONT_FAMILIES).map(([key, stack]) => [key, cleanStack(stack)])
+);
+
+const EXACT_KEY_BY_CLEAN_STACK = Object.fromEntries(
+  Object.entries(CLEANED_FONT_STACKS).map(([key, cleanedStack]) => [cleanedStack, key])
+);
+
+const FONT_KEY_LOWER = Object.fromEntries(
+  EDITOR_FONT_WHITELIST.map((key) => [key, key.toLowerCase()])
+);
+
+function primaryFontName(stack) {
+  return stack.split(",")[0].trim().replace(/^["']|["']$/g, "");
+}
+
+function formatFontLabel(key) {
+  return key
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+export function buildEditorFontCss() {
+  const editorRules = EDITOR_FONT_WHITELIST.map((key) => {
+    const stack = EDITOR_FONT_FAMILIES[key];
+    const primary = primaryFontName(stack);
+    return `
+.ql-snow .ql-editor .ql-font-${key},
+.ql-snow .ql-editor [style*="font-family: ${primary}"],
+.ql-snow .ql-editor [style*='font-family: "${primary}"'] {
+  font-family: ${stack} !important;
+}`;
+  }).join("\n");
+  const toolbarRules = EDITOR_FONT_WHITELIST.map((key) => {
+    const stack = EDITOR_FONT_FAMILIES[key];
+    const label = formatFontLabel(key);
+    return `
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="${key}"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="${key}"]::before {
+  content: "${label}";
+  font-family: ${stack};
+}`;
+  }).join("\n");
+  return `
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "Default";
+}
+${editorRules}
+${toolbarRules}`;
+}
+
+const Inline = Quill.import("blots/inline");
+
+// 1. Define a completely custom Font Format Blot instead of standard Class/Style overrides
+class CustomFontBlot extends Inline {
+  static create(value) {
+    const node = super.create();
+    
+    // Check if the incoming value is a shorthand key or a fully resolved font stack
+    if (EDITOR_FONT_FAMILIES[value]) {
+      node.style.fontFamily = EDITOR_FONT_FAMILIES[value];
+    } else if (Object.values(EDITOR_FONT_FAMILIES).includes(value)) {
+      node.style.fontFamily = value;
+    } else {
+      // Fallback fallback if an unknown value leaks through
+      node.style.fontFamily = value;
+    }
+    
+    return node;
+  }
+
+  static formats(node) {
+    const fontFamily = node.style.fontFamily || "";
+    const cleanFontFamily = cleanStack(fontFamily);
+  
+    // Fast path: exact match by cleaned stack
+    const exactKey = EXACT_KEY_BY_CLEAN_STACK[cleanFontFamily];
+    if (exactKey) return exactKey;
+  
+    // Fallback: preserve existing "includes(keyLower)" behavior
+    const lower = cleanFontFamily.toLowerCase();
+    const match = EDITOR_FONT_WHITELIST.find((key) =>
+      lower.includes(FONT_KEY_LOWER[key])
+    );
+  
+    return match || (typeof fontFamily === "string" ? fontFamily : undefined);
+  }
+
+  format(name, value) {
+    if (name === 'font' && value) {
+      if (EDITOR_FONT_FAMILIES[value]) {
+        this.domNode.style.fontFamily = EDITOR_FONT_FAMILIES[value];
+      } else {
+        this.domNode.style.fontFamily = value;
+      }
+    } else {
+      super.format(name, value);
+    }
+  }
+}
+
+// 2. Set the internal registration configurations for Quill
+CustomFontBlot.blotName = "font";
+CustomFontBlot.tagName = "span";
+CustomFontBlot.whitelist = EDITOR_FONT_WHITELIST;
+
+// 3. Register your new blot directly to overwrite Quill's standard 'formats/font' handle
+Quill.register(CustomFontBlot, true);
+
+export default Quill;

package/src/stories/CEditor.stories.js

@@ -1,4 +1,5 @@
 import CEditor from "../components/CEditor/CEditor.vue";
+import { EDITOR_FONT_WHITELIST } from "../components/CEditor/quill-font-setup";
 import "./utils.css";
 
 export default {
@@ -25,6 +26,11 @@ Default.args = {
   label: "String",
   hint: "String",
   helpText: "String",
-  toolbarOptions: ["bold", "italic"],
+  toolbarOptions: [
+    [{ font: EDITOR_FONT_WHITELIST }],
+    ["bold", "italic", "underline", "strike"],
+    [{ list: "ordered" }, { list: "bullet" }],
+    ["link", "image", "video"],
+  ],
   placeholder: "Please enter your text here...",
 };