@portone/docx-editor 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @portone/docx-editor
 
+## 0.1.1
+
+### Patch Changes
+
+- [#36](https://github.com/portone-io/docx-editor/pull/36) [`ab518b9`](https://github.com/portone-io/docx-editor/commit/ab518b9c551afc1d647ad612b265ec5895601240) Thanks [@Deea222](https://github.com/Deea222)! - Read two Unicode spellings of one font name as the same font.
+  
+  A name a document writes down can be composed or decomposed (NFC or NFD) while the same name elsewhere in the document, or among the toolbar's presets, is written the other way.
+  Those spellings used to compare unequal, so the font dropdown listed the same font twice and a selection that all carried one font could report as mixed and blank the dropdown.
+  Names are now compared in composed form, and the spelling the document wrote is what stays stored, exported, and shown.
+  
+  A list marker cut to its length cap is also cut between characters now, instead of possibly splitting an emoji or a combining sequence in half and drawing a replacement glyph.
+
 ## 0.1.0
 
 The first release.

package/dist/editor/commands/formatting/reading.js

@@ -5,6 +5,7 @@ import {
   toRunFormat
 } from "../../../model/format.js";
 import {
+  comparableFontName,
   DEFAULT_FONT_FALLBACKS
 } from "../../../styles/fontStack.js";
 import {
@@ -40,22 +41,30 @@ function defaultFontName(state, fontFallbacks) {
 function activeFontFamily(state, fontFallbacks = DEFAULT_FONT_FALLBACKS) {
   const names = activePieces(state).map((target) => fontNameOf(target.format));
   const first = names[0] ?? null;
-  if (names.some((name) => name !== first)) return { kind: "mixed" };
+  const keys = names.map(
+    (name) => name === null ? null : comparableFontName(name)
+  );
+  if (keys.some((key) => key !== keys[0])) return { kind: "mixed" };
   if (first !== null) return { kind: "font", name: first };
   return { kind: "default", name: defaultFontName(state, fontFallbacks) };
 }
 function documentFontNames(doc, defaults) {
-  const names = new Set(fontNamesOf(defaults.fontFamily));
+  const names = /* @__PURE__ */ new Map();
+  const collect = (name) => {
+    const comparable = comparableFontName(name);
+    if (!names.has(comparable)) names.set(comparable, name);
+  };
+  for (const name of fontNamesOf(defaults.fontFamily)) collect(name);
   doc.descendants((node) => {
     const mark = runMarkOf(node.marks);
     for (const name of fontNamesOf(
       toRunFormat(mark?.attrs.format)?.fontFamily
     )) {
-      names.add(name);
+      collect(name);
     }
     return true;
   });
-  return Array.from(names).sort((a, b) => a.localeCompare(b));
+  return Array.from(names.values()).sort((a, b) => a.localeCompare(b));
 }
 function activeTextColor(state) {
   return sharedValue(

package/dist/numbering/markers.js

@@ -70,6 +70,18 @@ function advance(counters, list, ilvl, start) {
     if (deeper > ilvl) counters.delete(deeper);
   }
 }
+var MARKER_SEGMENTER = new Intl.Segmenter();
+function capped(shape) {
+  if (shape.length <= MAX_MARKER_CHARS) return shape;
+  let text = "";
+  for (const { segment } of MARKER_SEGMENTER.segment(
+    shape.slice(0, MAX_MARKER_CHARS * 2)
+  )) {
+    if (text.length + segment.length > MAX_MARKER_CHARS) break;
+    text += segment;
+  }
+  return text;
+}
 function computeMarkers(paragraphs, numbering) {
   const countersByList = /* @__PURE__ */ new Map();
   return paragraphs.map((ref) => {
@@ -84,7 +96,7 @@ function computeMarkers(paragraphs, numbering) {
     }
     advance(counters, list, ref.ilvl, level.start);
     const shape = level.format === "bullet" ? level.text : fillLevels(level.text, list, counters);
-    const text = shape.slice(0, MAX_MARKER_CHARS);
+    const text = capped(shape);
     return text ? { text, indent: levelIndentPt(level.indent) } : null;
   });
 }

package/dist/styles/fontStack.d.ts

@@ -36,6 +36,15 @@ export interface FontFallbacks {
  * own set (`fontFallbacks` on `DocxEditor`).
  */
 export declare const DEFAULT_FONT_FALLBACKS: FontFallbacks;
+/**
+ * The form a name is compared in. Quotes, letter case, and Unicode normalization all vary
+ * from document to document, so two spellings of one name have to compare equal.
+ *
+ * NFC only. An NFK* form is lossy and would fold the fullwidth Latin of a name such as
+ * `ＤＦＫａｉＳｈｕ` into ASCII. The result is a comparison key and is never
+ * written into a document or shown: the original spelling is what gets stored and exported.
+ */
+export declare function comparableFontName(name: string): string;
 /**
  * Whether this font name belongs to a script written in Han characters, kana or
  * Hangul.

package/dist/styles/fontStack.js

@@ -189,15 +189,15 @@ var DEFAULT_FONT_FALLBACKS = {
   defaultStack: "Arial, Helvetica, sans-serif",
   defaultFontName: "Arial"
 };
-function comparableName(name) {
-  return name.trim().replace(/^["']|["']$/g, "").toLowerCase();
+function comparableFontName(name) {
+  return name.trim().replace(/^["']|["']$/g, "").toLowerCase().normalize("NFC");
 }
 var EAST_ASIAN_CHARACTER = /[\u1100-\u11ff\u3000-\u30ff\u3130-\u318f\u31f0-\u31ff\u3400-\u4dbf\u4e00-\u9fff\ua960-\ua97f\uac00-\ud7ff\uf900-\ufaff\uff00-\uffef\u{20000}-\u{2fa1f}]/u;
 var eastAsianNames = new Set(
-  EAST_ASIAN_GROUPS.flatMap((group) => group.names.map(comparableName))
+  EAST_ASIAN_GROUPS.flatMap((group) => group.names.map(comparableFontName))
 );
 function isEastAsianFontName(name) {
-  return EAST_ASIAN_CHARACTER.test(name) || eastAsianNames.has(comparableName(name));
+  return EAST_ASIAN_CHARACTER.test(name) || eastAsianNames.has(comparableFontName(name));
 }
 var stacksByFallbacks = /* @__PURE__ */ new WeakMap();
 function stackByName(fallbacks) {
@@ -206,7 +206,7 @@ function stackByName(fallbacks) {
   const stacks = /* @__PURE__ */ new Map();
   for (const group of fallbacks.groups) {
     for (const name of group.names)
-      stacks.set(comparableName(name), group.stack);
+      stacks.set(comparableFontName(name), group.stack);
   }
   stacksByFallbacks.set(fallbacks, stacks);
   return stacks;
@@ -215,7 +215,7 @@ function matchedStacks(cssNames, fallbacks) {
   const stacks = stackByName(fallbacks);
   const matched = [];
   for (const name of cssNames.split(",")) {
-    const stack = stacks.get(comparableName(name));
+    const stack = stacks.get(comparableFontName(name));
     if (stack !== void 0 && !matched.includes(stack)) matched.push(stack);
   }
   return matched;
@@ -235,12 +235,12 @@ var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
   "emoji"
 ]);
 function isGenericFamily(name) {
-  return GENERIC_FAMILIES.has(comparableName(name));
+  return GENERIC_FAMILIES.has(comparableFontName(name));
 }
 function distinctNames(names) {
   const seen = /* @__PURE__ */ new Set();
   return names.filter((name) => {
-    const comparable = comparableName(name);
+    const comparable = comparableFontName(name);
     if (seen.has(comparable)) return false;
     seen.add(comparable);
     return true;
@@ -257,6 +257,7 @@ function withFontFallback(cssNames, fallbacks = DEFAULT_FONT_FALLBACKS) {
 }
 export {
   DEFAULT_FONT_FALLBACKS,
+  comparableFontName,
   isEastAsianFontName,
   withFontFallback
 };

package/dist/ui/FontFamilySelect.js

@@ -3,7 +3,10 @@ import {
   setFontFamily
 } from "../editor/commands/formattingCommands.js";
 import { editorClassNames } from "../styles/classNames.js";
-import { withFontFallback } from "../styles/fontStack.js";
+import {
+  comparableFontName,
+  withFontFallback
+} from "../styles/fontStack.js";
 import { DEFAULT_FONTS } from "../styles/fonts.js";
 import { Tooltip } from "./Tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,11 +14,21 @@ var LABEL = "Font";
 var CLEAR = ";default";
 var MIXED = "";
 function optionNames(current, fonts, documentFonts) {
-  const names = [...fonts, ...documentFonts];
-  if (current.kind !== "mixed" && !names.includes(current.name)) {
-    names.push(current.name);
+  const names = [
+    ...fonts,
+    ...documentFonts,
+    ...current.kind === "mixed" ? [] : [current.name]
+  ];
+  const byComparable = /* @__PURE__ */ new Map();
+  for (const name of names) {
+    const comparable = comparableFontName(name);
+    if (!byComparable.has(comparable)) byComparable.set(comparable, name);
   }
-  return Array.from(new Set(names));
+  return Array.from(byComparable.values());
+}
+function selectedValue(options, name) {
+  const comparable = comparableFontName(name);
+  return options.find((option) => comparableFontName(option) === comparable) ?? name;
 }
 function FontFamilySelect({
   current,
@@ -25,7 +38,8 @@ function FontFamilySelect({
   disabled,
   run
 }) {
-  const value = current.kind === "mixed" ? MIXED : current.name;
+  const options = optionNames(current, fonts, documentFonts);
+  const value = current.kind === "mixed" ? MIXED : selectedValue(options, current.name);
   return /* @__PURE__ */ jsx(Tooltip, { label: LABEL, children: /* @__PURE__ */ jsxs(
     "select",
     {
@@ -41,7 +55,7 @@ function FontFamilySelect({
       children: [
         current.kind === "mixed" && /* @__PURE__ */ jsx("option", { value: MIXED }),
         /* @__PURE__ */ jsx("option", { value: CLEAR, children: "Default" }),
-        optionNames(current, fonts, documentFonts).map((name) => /* @__PURE__ */ jsx(
+        options.map((name) => /* @__PURE__ */ jsx(
           "option",
           {
             value: name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portone/docx-editor",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A simple DOCX editor for React, built directly on OOXML.",
   "license": "Apache-2.0",
   "type": "module",