@growgroup/visual-editor 0.7.1 → 0.8.0

package/src/editor/utils/tailwind-utils.ts

@@ -294,6 +294,80 @@ function isTextColorClass(cls: string): boolean {
   return false;
 }
 
+// ------------------------------------------------------------
+// 線(border-*)のクラスの見分け
+// ------------------------------------------------------------
+// border- で始まるクラスには、太さ(border-2 / border-l-2)・色(border-wf-ink)・
+// スタイル(border-dashed)・表(border-collapse)が混ざっている。
+// 以前は線色・線幅の変更で「border- で始まるもの」を全部消していたので、
+// 左だけの線(border-l-2)や色・破線まで消えていた。tailwind-merge と同じ見分け方にする
+// (太さ・スタイル・表の形でないものを色とみなす。テーマの色名を名簿で持たずに済む)
+
+const BORDER_STYLE_CLASSES = new Set([
+  'border-solid',
+  'border-dashed',
+  'border-dotted',
+  'border-double',
+  'border-hidden',
+  'border-none',
+]);
+
+const isBorderTableClass = (cls: string) => /^border-(collapse|separate|spacing(-|$))/.test(cls);
+
+/**
+ * important の印を外す(`border-2!` / `!border-2`)。付いていても種類は同じなので、
+ * 判定の前に外して、消すときも同じ種類として消す(付いたまま残ると、新しい太さが !important に負ける)
+ */
+const stripImportant = (cls: string) => cls.replace(/^!/, '').replace(/!$/, '');
+
+/**
+ * 太さの値: 数字(border-2)、長さの任意値(border-[2px] / border-[length:var(--w)] /
+ * border-[min(2px,1vw)])、太さのキーワード(border-[thin] など。`border-[mediumblue]` は色なので厳密一致)、
+ * border-(length:--w)
+ */
+const BORDER_WIDTH_VALUE = String.raw`(-\d+|-\[(?:thin|medium|thick)\]|-\[(?:\d|\.|calc\(|min\(|max\(|clamp\(|length:)[^\]]*\]|-\(length:[^)]*\))?`;
+
+/** 辺の指定。`bs` / `be`(書字方向の始め・終わり)も Tailwind では辺の太さ */
+const BORDER_SIDE_TOKENS = '(?:[trblxyse]|bs|be)';
+
+/**
+ * 太さのクラス。side を渡すとその辺だけ(border-l / border-l-2 / border-l-[3px])、
+ * '' なら四辺まとめての指定だけ(border / border-2)。渡さなければ全部の辺と各辺
+ */
+/** 辺を表す文字。`s` / `e` は書字方向、`bs` / `be` はブロック方向 */
+export type SideLetter = 't' | 'r' | 'b' | 'l' | 'x' | 'y' | 's' | 'e' | 'bs' | 'be';
+
+export function isBorderWidthClass(cls: string, side?: SideLetter | ''): boolean {
+  const sides = side === undefined ? `(-${BORDER_SIDE_TOKENS})?` : side ? `-${side}` : '';
+  return new RegExp(`^border${sides}${BORDER_WIDTH_VALUE}$`).test(stripImportant(cls));
+}
+
+/** スタイルのクラス(border-solid / border-dashed!) */
+const isBorderStyleClass = (cls: string) => BORDER_STYLE_CLASSES.has(stripImportant(cls));
+
+/** 太さ 0 の指定(border-0 / border-l-0 / border-[0px])。「線がある」の判定では数えない */
+export function isZeroBorderWidthClass(cls: string): boolean {
+  return new RegExp(`^border(-${BORDER_SIDE_TOKENS})?-(0|\\[0(?:px|rem|em)?\\])$`).test(stripImportant(cls));
+}
+
+/** 色のクラス(border-wf-ink / border-l-wf-ink / border-[#fff] / border-[var(--x)] / border-wf-ink/50) */
+function isBorderColorClass(cls: string): boolean {
+  const bare = stripImportant(cls);
+  return (
+    bare.startsWith('border-') &&
+    !BORDER_STYLE_CLASSES.has(bare) &&
+    !isBorderTableClass(bare) &&
+    !isBorderWidthClass(bare)
+  );
+}
+
+const BORDER_SIDE_WIDTH_PROPERTIES: Record<string, 't' | 'r' | 'b' | 'l'> = {
+  borderTopWidth: 't',
+  borderRightWidth: 'r',
+  borderBottomWidth: 'b',
+  borderLeftWidth: 'l',
+};
+
 /**
  * 競合するクラスを要素から削除
  *
@@ -322,6 +396,26 @@ export function removeConflictingClasses(
     return;
   }
 
+  // 線の太さ・色・スタイルは、同じ種類のクラスだけを消す(太さを変えても色・破線は残す。色を変えても左だけの線は残す)。
+  // スタイルもここで消すのは、important 付き(border-dashed!)を名前の一致では拾えないため
+  if (
+    property === 'borderWidth' ||
+    property === 'borderColor' ||
+    property === 'borderStyle' ||
+    property in BORDER_SIDE_WIDTH_PROPERTIES
+  ) {
+    const side = BORDER_SIDE_WIDTH_PROPERTIES[property];
+    const conflicts =
+      property === 'borderColor'
+        ? isBorderColorClass
+        : property === 'borderStyle'
+          ? isBorderStyleClass
+          : (cls: string) => isBorderWidthClass(cls, side);
+    const currentClasses = getElementClassName(element).split(/\s+/).filter(Boolean);
+    setElementClassName(element, currentClasses.filter((cls) => !conflicts(cls)).join(' '));
+    return;
+  }
+
   if (!conflictPrefixes || conflictPrefixes.length === 0) return;
 
   const currentClasses = getElementClassName(element).split(/\s+/).filter(Boolean);
@@ -379,6 +473,17 @@ const LAYOUT_CRITICAL_PROPERTIES = new Set([
   'maxWidth',
   'minHeight',
   'maxHeight',
+  // 線のスタイル(なし / 実線 / 破線 / 点線)も同じ理由でインラインを残す。
+  // 紙面の CSS はファイルに書かれたクラスの分しか作られない(Vite の @source 走査)ので、
+  // 付けたばかりの border-none / border-solid にはルールが無く、紙面が変わらない。
+  // 右パネルは紙面の computed style を読み直すため、「なし」を選んでも「実線」に戻って見えていた
+  'borderStyle',
+  // 線幅も同じ。border-0 / border-l-0 などは紙面の CSS に無いことが多い(構成ラフの殻で実測)
+  'borderWidth',
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
   'display',
   'flexDirection',
   'flexWrap',

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.7.1';
+export const EDITOR_VERSION = '0.8.0';