src/assets/icons/components/IconStrikethrough.tsx

@@ -1,11 +1,19 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconStrikethrough = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M5 24H43" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M24 24C40 30 34 44 24 44C13.9999 44 12 36 12 36" stroke="currentColor" stroke-width="4"
-        stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M35.9999 12C35.9999 12 33 4 23.9999 4C14.9999 4 11.4359 11.5995 15.6096 18"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M12 36C12 36 15.9999 44 24 44C32 44 36.564 36.4005 32.3903 30" stroke="currentColor"
-        stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+export const IconStrikethrough = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1620.094 327.783)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M5,24H16.811" transform="translate(0 -13.783)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M15.73,24c4.973,1.865,3.108,6.217,0,6.217A3.614,3.614,0,0,1,12,27.73"
+                transform="translate(-4.824 -13.783)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M20.751,6.487A4.048,4.048,0,0,0,17.021,4c-2.8,0-3.905,2.362-2.608,4.352"
+                transform="translate(-6.115 0)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M12,31.865s1.243,2.487,3.73,2.487S19.635,31.989,18.338,30"
+                transform="translate(-4.824 -17.918)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextBold.tsx

@@ -1,10 +1,14 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextBold = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M24 24C29.5056 24 33.9688 19.5228 33.9688 14C33.9688 8.47715 29.5056 4 24 4H11V24H24Z"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M28.0312 44C33.5368 44 38 39.5228 38 34C38 28.4772 33.5368 24 28.0312 24H11V44H28.0312Z"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+export const IconTextBold = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1615.804 327.783)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                fill-rule="evenodd" d="M15.041,10.217a3.108,3.108,0,0,0,0-6.217H11v6.217Z" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                fill-rule="evenodd"
+                d="M16.294,30.217a3.108,3.108,0,0,0,0-6.217H11v6.217Z"
+                transform="translate(0 -13.783)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextCenter.tsx

@@ -1,10 +1,16 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextCenter = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M36 19H12" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M36 39H12" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+export const IconTextCenter = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,9H18.444" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,19h9.679" transform="translate(-4.617 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,29H18.444" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,39h9.679" transform="translate(-4.617 -28.372)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextItalic.tsx

@@ -1,9 +1,14 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextItalic = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M20 6H36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M12 42H28" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M29 5.95215L19 41.9998" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+export const IconTextItalic = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1614.861 325.831)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M20,6h5.518" transform="translate(-5.241 -0.031)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M12,42h5.518" transform="translate(0 -23.615)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M22.449,5.952,19,18.385" transform="translate(-4.586)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextJustify.tsx

@@ -1,8 +1,16 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextJustify = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 19H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 39H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+export const IconTextJustify = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,9H6" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,19H6" transform="translate(-6 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,29H6" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,39H6" transform="translate(-6 -28.372)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextLeft.tsx

@@ -1,8 +1,17 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextLeft = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M34 19H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M34 39H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+export const IconTextLeft = createIcon(<svg viewBox="0 0 22 22">
+    
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.778 323.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.445,9H6" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,19H6" transform="translate(0 -6.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.445,29H6" transform="translate(0 -12.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,39H6" transform="translate(0 -19.372)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextLetterSpacing.tsx

@@ -0,0 +1,18 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconTextLetterSpacing = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.746 323.892)">
+            <path stroke="currentColor" stroke-linecap="round"
+                d="M5,20.217V8" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M17.818,13,14,21.4" transform="translate(-5.564 -3.091)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18,28h4.581" transform="translate(-8.037 -12.365)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M24,13l3.818,8.4" transform="translate(-11.746 -3.091)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                d="M43,20.217V8" transform="translate(-23.493)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconTextLineHeight.tsx

@@ -0,0 +1,18 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconTextLineHeight = createIcon(<svg viewBox="0 0 22 22">
+
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.256 324.631)">
+            <path stroke="currentColor" stroke-linecap="round" d="M6,7H19.488" />
+            <path stroke="currentColor" stroke-linecap="round" d="M6,41H19.488"
+                transform="translate(0 -21.262)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M17.747,13,14,21.242" transform="translate(-5.003 -3.752)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18,28h4.5" transform="translate(-7.504 -13.132)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M24,13l3.747,8.242" transform="translate(-11.256 -3.752)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconTextRight.tsx

@@ -1,10 +1,16 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextRight = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 19H14" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 39H14" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+export const IconTextRight = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,9H18.444" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,19h9.679" transform="translate(-3.235 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,29H18.444" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,39h9.679" transform="translate(-3.235 -28.372)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextSize.tsx

@@ -0,0 +1,19 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconTextSize = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1823 -281)">
+        <g transform="translate(1823.623 278.629)">
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" fill="none"
+                d=" M4,18.841l1.576-3.826m7.353,3.826-1.576-3.826m0,0L10.7,13.421,8.464,8,6.232,13.421l-.656,1.594m5.777,0H5.576" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M28,10h5.1" transform=" translate(-16.347 -1.362)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M32,20h3.826" transform=" translate(-19.072 -8.174)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M36,30h2.551" transform=" translate(-21.796 -14.985)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M40,40h1.275" transform=" translate(-24.521 -21.796)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconTextUnderline.tsx

@@ -1,8 +1,13 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextUnderline = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M8 44H40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path
-        d="M37 6.09717C37 12.7638 37 15.0005 37 22.0002C37 29.1799 31.1797 35.0002 24 35.0002C16.8203 35.0002 11 29.1799 11 22.0002C11 15.0005 11 12.7638 11 6.09717"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+export const IconTextUnderline = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1617.751 325.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M8,44H18.5" transform="translate(-0.001 -25.47)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M19.529,6.1v5.217a4.264,4.264,0,1,1-8.529,0V6.1"
+                transform="translate(-2.016 0)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/index.ts

@@ -29,7 +29,6 @@ export * from "./components/IconImage";
 export * from "./components/IconLayerDown";
 export * from "./components/IconLayers";
 export * from "./components/IconLayerUp";
-export * from "./components/IconLineHeight";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
@@ -51,7 +50,10 @@ export * from "./components/IconTextCenter";
 export * from "./components/IconTextItalic";
 export * from "./components/IconTextJustify";
 export * from "./components/IconTextLeft";
+export * from "./components/IconTextLetterSpacing";
+export * from "./components/IconTextLineHeight";
 export * from "./components/IconTextRight";
+export * from "./components/IconTextSize";
 export * from "./components/IconTextUnderline";
 export * from "./components/IconTpl";
 export * from "./components/IconTransfer";

src/assets/icons/svg/lineHeight.svg

@@ -1,14 +0,0 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M16 35L10 41L4 35" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M16 13L10 7L4 13" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M10 7V41" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M44 9H22" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M36 19H22" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M44 29H22" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M36 39H22" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-</svg>

src/assets/icons/svg/strikethrough.svg

@@ -1,9 +1,17 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M5 24H43" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M24 24C40 30 34 44 24 44C13.9999 44 12 36 12 36" stroke="currentColor" stroke-width="4"
-        stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M35.9999 12C35.9999 12 33 4 23.9999 4C14.9999 4 11.4359 11.5995 15.6096 18"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M12 36C12 36 15.9999 44 24 44C32 44 36.564 36.4005 32.3903 30" stroke="currentColor"
-        stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1620.094 327.783)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M5,24H16.811" transform="translate(0 -13.783)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M15.73,24c4.973,1.865,3.108,6.217,0,6.217A3.614,3.614,0,0,1,12,27.73"
+                transform="translate(-4.824 -13.783)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M20.751,6.487A4.048,4.048,0,0,0,17.021,4c-2.8,0-3.905,2.362-2.608,4.352"
+                transform="translate(-6.115 0)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M12,31.865s1.243,2.487,3.73,2.487S19.635,31.989,18.338,30"
+                transform="translate(-4.824 -17.918)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textBold.svg

@@ -1,8 +1,12 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M24 24C29.5056 24 33.9688 19.5228 33.9688 14C33.9688 8.47715 29.5056 4 24 4H11V24H24Z"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M28.0312 44C33.5368 44 38 39.5228 38 34C38 28.4772 33.5368 24 28.0312 24H11V44H28.0312Z"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1615.804 327.783)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                fill-rule="evenodd" d="M15.041,10.217a3.108,3.108,0,0,0,0-6.217H11v6.217Z" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                fill-rule="evenodd"
+                d="M16.294,30.217a3.108,3.108,0,0,0,0-6.217H11v6.217Z"
+                transform="translate(0 -13.783)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textCenter.svg

@@ -1,8 +1,14 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M36 19H12" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M36 39H12" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,9H18.444" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,19h9.679" transform="translate(-4.617 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,29H18.444" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,39h9.679" transform="translate(-4.617 -28.372)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textItalic.svg

@@ -1,7 +1,12 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M20 6H36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M12 42H28" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M29 5.95215L19 41.9998" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1614.861 325.831)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M20,6h5.518" transform="translate(-5.241 -0.031)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M12,42h5.518" transform="translate(0 -23.615)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M22.449,5.952,19,18.385" transform="translate(-4.586)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textJustify.svg

@@ -1,6 +1,14 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 19H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 39H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,9H6" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,19H6" transform="translate(-6 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,29H6" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,39H6" transform="translate(-6 -28.372)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textLeft.svg

@@ -1,6 +1,15 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M34 19H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M34 39H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.778 323.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.445,9H6" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,19H6" transform="translate(0 -6.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.445,29H6" transform="translate(0 -12.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,39H6" transform="translate(0 -19.372)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textLetterSpacing.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.746 323.892)">
+            <path stroke="currentColor" stroke-linecap="round"
+                d="M5,20.217V8" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M17.818,13,14,21.4" transform="translate(-5.564 -3.091)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18,28h4.581" transform="translate(-8.037 -12.365)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M24,13l3.818,8.4" transform="translate(-11.746 -3.091)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                d="M43,20.217V8" transform="translate(-23.493)" />
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/textLineHeight.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 22 22">
+
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.256 324.631)">
+            <path stroke="currentColor" stroke-linecap="round" d="M6,7H19.488" />
+            <path stroke="currentColor" stroke-linecap="round" d="M6,41H19.488"
+                transform="translate(0 -21.262)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M17.747,13,14,21.242" transform="translate(-5.003 -3.752)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18,28h4.5" transform="translate(-7.504 -13.132)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M24,13l3.747,8.242" transform="translate(-11.256 -3.752)" />
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/textRight.svg

@@ -1,8 +1,14 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 19H14" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 39H14" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,9H18.444" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,19h9.679" transform="translate(-3.235 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,29H18.444" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,39h9.679" transform="translate(-3.235 -28.372)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textSize.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1823 -281)">
+        <g transform="translate(1823.623 278.629)">
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" fill="none"
+                d=" M4,18.841l1.576-3.826m7.353,3.826-1.576-3.826m0,0L10.7,13.421,8.464,8,6.232,13.421l-.656,1.594m5.777,0H5.576" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M28,10h5.1" transform=" translate(-16.347 -1.362)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M32,20h3.826" transform=" translate(-19.072 -8.174)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M36,30h2.551" transform=" translate(-21.796 -14.985)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M40,40h1.275" transform=" translate(-24.521 -21.796)" />
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/textUnderline.svg

@@ -1,6 +1,11 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M8 44H40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path
-        d="M37 6.09717C37 12.7638 37 15.0005 37 22.0002C37 29.1799 31.1797 35.0002 24 35.0002C16.8203 35.0002 11 29.1799 11 22.0002C11 15.0005 11 12.7638 11 6.09717"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1617.751 325.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M8,44H18.5" transform="translate(-0.001 -25.47)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M19.529,6.1v5.217a4.264,4.264,0,1,1-8.529,0V6.1"
+                transform="translate(-2.016 0)" />
+        </g>
+    </g>
 </svg>

src/modules/editor/components/CompUI/basicUI/Text/EditorCustom.ts

@@ -14,8 +14,9 @@ import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import Heading from "@ckeditor/ckeditor5-heading/src/heading";
 import LineHeight from "ckeditor5-line-height-latest/src/lineheight";
+import LetterSpacing from "./ckeditor-letter-spacing";
 import { EditorConfig } from "@ckeditor/ckeditor5-core";
-class HeadlessEditor extends DecoupledEditorBase {}
+export class HeadlessEditor extends DecoupledEditorBase {}
 interface HeadlessConfig extends EditorConfig {
   lineHeight: any;
 }
@@ -33,6 +34,7 @@ HeadlessEditor.builtinPlugins = [
   FontFamily,
   Alignment,
   LineHeight,
+  LetterSpacing,
 ];
 const fontSizeOptions = [];
 const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60];

src/modules/editor/components/CompUI/basicUI/Text/ToolbarComp.tsx → src/modules/editor/components/CompUI/basicUI/Text/TextToolComp.tsx

@@ -1,16 +1,22 @@
 import {
-  IconLineHeight,
   IconTextCenter,
   IconTextJustify,
   IconTextLeft,
+  IconTextLetterSpacing,
+  IconTextLineHeight,
   IconTextRight,
+  IconTextSize,
+  IconStrikethrough,
+  IconTextBold,
+  IconTextItalic,
+  IconTextUnderline,
 } from "@/assets/icons";
 import { css } from "@linaria/core";
-import { Button, Dropdown, InputNumber, Menu, Tooltip } from "ant-design-vue";
+import { Button, Input, InputNumber, Tooltip } from "ant-design-vue";
 
 import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
-import Pickr from "@simonwep/pickr";
 import "@simonwep/pickr/dist/themes/nano.min.css";
+import _ from "lodash";
 import { queenApi } from "queenjs";
 import {
   defineComponent,
@@ -20,9 +26,16 @@ import {
   ref,
   watch,
 } from "vue";
-import { any, bool, string } from "vue-types";
-import _ from "lodash";
-
+import { any, bool, func, number, object, string } from "vue-types";
+import { useEditor } from "@/modules/editor";
+interface ColumnItem {
+  label?: string;
+  component?: ((...args: any[]) => any) | Record<string, any>;
+  dataIndex?: string;
+  props?: { [name: string]: any };
+  itemProps?: { [name: string]: any };
+  changeExtra?: (data: any) => any;
+}
 // export const TextColor = defineComponent({
 //   props: {
 //     value: string().def("#666666"),
@@ -192,86 +205,136 @@ export const AlignComp = defineComponent({
         icon: <IconTextJustify />,
       },
     ];
-
-    const overlay = () => {
-      return (
-        <Menu>
-          {aligns.map((e: any) => {
-            return (
-              <Menu.Item
+    return () => (
+      <div class={AlignCompWapper}>
+        {aligns.map((e: any) => {
+          return (
+            <Tooltip title={e.label} placement="top">
+              <Button
                 class={props.value == e.key ? currStyle : null}
+                icon={e.icon}
+                type="text"
                 onClick={() => {
                   emit("change", e.key);
                 }}
-              >
-                <Tooltip placement="right" title={e.label}>
-                  {e.icon}
-                </Tooltip>
-              </Menu.Item>
-            );
-          })}
-        </Menu>
+              ></Button>
+            </Tooltip>
+          );
+        })}
+      </div>
+    );
+  },
+});
+export const LetterSpacingComp = defineComponent({
+  props: {
+    value: string().def("0"),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => {
+      const value = parseFloat(props.value) || 0;
+      return (
+        <InputNumber
+          prefix={<IconTextLetterSpacing class="text-22px mr-6px" />}
+          defaultValue={0}
+          min={0}
+          max={100}
+          step={1}
+          value={value}
+          onChange={(value: any) => {
+            if (!value) {
+              emit("change", "0em");
+              return;
+            }
+            emit("change", value / 100 + "em");
+          }}
+        />
       );
     };
-    const currIcon = (key: string) => {
-      const item = aligns.find((e) => {
-        return e.key == key;
-      });
-      return item ? item.icon : null;
-    };
-    return () => (
-      <Dropdown
-        overlay={overlay()}
-        overlayClassName={"editor_toolbar_drop"}
-        trigger={"click"}
-        placement="bottom"
-      >
-        <Button type="text" icon={currIcon(props.value)}></Button>
-      </Dropdown>
-    );
   },
 });
 
 export const LineHeightComp = defineComponent({
   props: {
-    value: string().def("1.5"),
+    value: number().def(1.5),
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const options = [1, 1.5, 2, 2.5, 3];
-
-    const overlay = () => {
+    return () => {
       return (
-        <Menu>
-          {options.map((e: any) => {
-            return (
-              <Menu.Item
-                class={props.value == e ? currStyle : null}
-                onClick={() => {
-                  emit("change", e);
-                }}
-              >
-                {e}
-              </Menu.Item>
-            );
-          })}
-        </Menu>
+        <InputNumber
+          prefix={<IconTextLineHeight class="text-22px mr-6px" />}
+          defaultValue={1.5}
+          min={0.5}
+          max={3}
+          step={0.5}
+          value={props.value || 1.5}
+          onChange={(value: any) => {
+            if (!value) {
+              emit("change", 1.5);
+              return;
+            }
+            emit("change", value);
+          }}
+        />
       );
     };
-
+  },
+});
+export const FontStyleWapper = defineComponent({
+  props: {
+    editor: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const fontStyleColumns = [
+      {
+        label: "加粗",
+        dataIndex: "bold",
+        icon: <IconTextBold />,
+      },
+      {
+        label: "斜体",
+        dataIndex: "italic",
+        icon: <IconTextItalic />,
+      },
+      {
+        label: "下划线",
+        dataIndex: "underline",
+        icon: <IconTextUnderline />,
+      },
+      {
+        label: "删除线",
+        dataIndex: "strikethrough",
+        icon: <IconStrikethrough />,
+      },
+    ];
+    const changeVal = (e: any) => {
+      emit("change", e);
+    };
     return () => (
-      <Dropdown
-        overlay={overlay()}
-        overlayClassName={"editor_toolbar_drop"}
-        trigger={"click"}
-        placement="bottom"
-      >
-        <Button type="text" icon={<IconLineHeight />}></Button>
-      </Dropdown>
+      <div class={[FontStyleCompWapper]}>
+        {fontStyleColumns.map((e: any) => {
+          return (
+            <TextToolItem
+              key={e.dataIndex}
+              class={"!mr-0"}
+              column={{
+                label: e.label,
+                dataIndex: e.dataIndex,
+                component: (props) => (
+                  <FontStyleComp icon={e.icon} {...props} />
+                ),
+              }}
+              editor={props.editor}
+              onChange={changeVal}
+            />
+          );
+        })}
+      </div>
     );
   },
 });
-
 export const FontStyleComp = defineComponent({
   props: {
     icon: any(),
@@ -282,14 +345,17 @@ export const FontStyleComp = defineComponent({
     const triggerStyle = () => {
       emit("change", !props.value);
     };
-    return () => (
-      <Button
-        type="text"
-        class={props.value ? currStyle : null}
-        icon={props.icon}
-        onClick={triggerStyle}
-      ></Button>
-    );
+    return () => {
+      console.log(props.value);
+      return (
+        <Button
+          type="text"
+          class={props.value ? currStyle : null}
+          icon={props.icon}
+          onClick={triggerStyle}
+        ></Button>
+      );
+    };
   },
 });
 
@@ -328,11 +394,16 @@ export const FontSize = defineComponent({
     return () => {
       return (
         <InputNumber
+          prefix={<IconTextSize class="text-22px mr-6px" />}
           defaultValue={12}
           min={12}
           max={60}
           value={parseInt(props.value) || 12}
           onChange={(value: any) => {
+            if (!value) {
+              emit("change", "12px");
+              return;
+            }
             emit("change", value + "px");
           }}
         />
@@ -360,6 +431,90 @@ export const LinkButton = defineComponent({
   },
 });
 
+export const TextToolItem = defineComponent({
+  props: {
+    column: object<ColumnItem>(),
+    index: number(),
+    editor: any(),
+    onChange: func(),
+  },
+  setup(props) {
+    const state = reactive({
+      value: undefined,
+    });
+    function handleValueChange() {
+      const { column, editor } = props;
+      const command = editor ? editor.commands.get(column?.dataIndex) : "";
+      if (command) {
+        console.log("change==>", column?.dataIndex, state.value);
+        state.value = command.value;
+      }
+    }
+    const initCommands = () => {
+      const { column, editor } = props;
+      const { controls } = useEditor();
+      const command = editor ? editor.commands.get(column?.dataIndex) : "";
+      console.log(column?.dataIndex, controls.textEditor);
+      if (command) {
+        state.value = command.value;
+
+        command.on("change:value", handleValueChange);
+      }
+    };
+    onMounted(() => {
+      initCommands();
+    });
+    onUnmounted(() => {
+      const { column, editor } = props;
+      const command = editor ? editor.commands.get(column?.dataIndex) : "";
+      if (command) {
+        command.off("change:value", handleValueChange);
+      }
+    });
+
+    const changeVal = (value: any, ...args: any[]) => {
+      const { column } = props;
+      let params = {
+        dataIndex: column?.dataIndex,
+        value: { value },
+        ...args,
+      };
+      if (column?.changeExtra) params = column.changeExtra?.(params);
+      props.onChange?.(params);
+      return params;
+    };
+
+    const component = props.column?.component || null;
+    return () => {
+      const { column, index } = props;
+      return (
+        <div
+          key={column?.dataIndex || "" + index}
+          class={formItemStyles}
+          {...column?.itemProps}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {column?.label ? (
+            <Tooltip title={column.label} placement="top">
+              <component
+                value={state.value}
+                {...column.props}
+                onChange={changeVal}
+              />
+            </Tooltip>
+          ) : (
+            <component
+              value={state.value}
+              {...column?.props}
+              onChange={changeVal}
+            />
+          )}
+        </div>
+      );
+    };
+  },
+});
+
 const currStyle = css`
   color: @inf-primary-color;
   &:hover,
@@ -394,45 +549,48 @@ const ColorPicker = css`
     border: none;
     visibility: hidden;
   }
-  .pickr {
-    width: 100%;
-    height: 100%;
+`;
 
-    .pcr-button {
-      width: 100%;
-      height: 100%;
-      border: 1px solid transparent;
-    }
-    border-radius: 2px;
-    input {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-    button {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
+const AlignCompWapper = css`
+  display: flex;
+  .ant-btn {
+    flex: 1;
+    width: 100%;
+    line-height: 1;
+    .inficon {
+      font-size: 22px;
     }
   }
-  .pcr-app {
-    input {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-    button {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
+`;
+const FontStyleCompWapper = css`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+  border-radius: 2px;
+  & > div {
+    flex: 1;
+    border-radius: 0;
+    .ant-btn {
+      width: 100%;
+      line-height: 1;
+      .inficon {
+        font-size: 22px;
       }
     }
   }
 `;
+
+const formItemStyles = css`
+  height: 100%;
+  flex: 1;
+  margin-right: 12px;
+  background-color: #303030;
+  border-radius: 2px;
+  &:last-child {
+    margin-right: 0;
+  }
+  &.disabled {
+    cursor: not-allowed;
+  }
+`;

src/modules/editor/components/CompUI/basicUI/Text/TextToolForm.tsx

@@ -0,0 +1,153 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+
+import { css } from "@linaria/core";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+import {
+  AlignComp,
+  FontFamily,
+  FontSize,
+  FontStyleWapper,
+  LetterSpacingComp,
+  LineHeightComp,
+  TextToolItem,
+} from "./TextToolComp";
+
+export const TextToolForm = defineComponent({
+  props: {
+    component: any<DesignComp>().isRequired,
+  },
+  setup(props) {
+    const { store, actions, controls } = useEditor();
+
+    const toolbarColumns = [
+      // {
+      //   label: "字体颜色",
+      //   dataIndex: "fontColor",
+      //   component: TextColor,
+      // },
+      // {
+      //   label: "链接",
+      //   dataIndex: "link",
+      //   component: (props: any) => (
+      //     <LinkButton icon={<LinkOutlined />} {...props} />
+      //   ),
+      //   changeExtra: (record: any) => {
+      //     record.value = record.value.value;
+      //     return record;
+      //   },
+      //   itemProps: {
+      //     class: "!mx-2px",
+      //   },
+      // },
+    ];
+
+    const changeVal = (e: { dataIndex: string; value: any }) => {
+      const editor = controls.textEditor;
+      if (!editor) {
+        return;
+      }
+      editor.execute(e.dataIndex, e.value);
+      console.log("change", e);
+      setTimeout(() => {
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        editor.editing.view.focus();
+      }, 100);
+    };
+    return () => {
+      return (
+        <div id="text_toolbar">
+          <div>文本</div>
+          <div class={"my-18px"}>
+            <div class={formRowItem}>
+              <TextToolItem
+                column={{
+                  dataIndex: "fontFamily",
+                  component: FontFamily,
+                  props: {
+                    class: "w-190px",
+                  },
+                }}
+                editor={controls.textEditor}
+                onChange={changeVal}
+              />
+              <TextToolItem
+                column={{
+                  label: "字号",
+                  dataIndex: "fontSize",
+                  component: FontSize,
+                  props: {
+                    class: "!w-full",
+                  },
+                }}
+                editor={controls.textEditor}
+                onChange={changeVal}
+              />
+            </div>
+            <div class={formRowItem}>
+              <TextToolItem
+                column={{
+                  label: "字间距",
+                  dataIndex: "letterSpacing",
+                  component: LetterSpacingComp,
+                  props: {
+                    class: "!w-full",
+                  },
+                }}
+                editor={controls.textEditor}
+                onChange={changeVal}
+              />
+              <TextToolItem
+                column={{
+                  label: "行高",
+                  dataIndex: "lineHeight",
+                  component: LineHeightComp,
+                  props: {
+                    class: "!w-full",
+                  },
+                }}
+                editor={controls.textEditor}
+                onChange={changeVal}
+              />
+            </div>
+            <div class={formRowItem}>
+              <FontStyleWapper
+                editor={controls.textEditor}
+                onChange={changeVal}
+              />
+              <TextToolItem
+                column={{
+                  label: "",
+                  dataIndex: "alignment",
+                  component: AlignComp,
+                }}
+                editor={controls.textEditor}
+                onChange={changeVal}
+              />
+            </div>
+          </div>
+
+          {/* <TextToolUI
+            editor={controls.textEditor}
+            columns={toolbarColumns}
+            onChange={changeVal}
+          /> */}
+          <div>填充</div>
+          <div>描边</div>
+        </div>
+      );
+    };
+  },
+});
+const formRowItem = css`
+  display: flex;
+  align-items: center;
+  margin-bottom: 14px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const TextToolbarStyle = css``;

src/modules/editor/components/CompUI/basicUI/Text/TextToolbar.tsx

@@ -1,174 +0,0 @@
-import {
-  IconStrikethrough,
-  IconTextBold,
-  IconTextItalic,
-  IconTextUnderline,
-} from "@/assets/icons";
-import { useEditor } from "@/modules/editor";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-import { LinkOutlined } from "@ant-design/icons-vue";
-
-import { css } from "@linaria/core";
-import { Divider } from "ant-design-vue";
-import { defineComponent } from "vue";
-import { any } from "vue-types";
-
-import TextToolbarsUI from "./TextToolbarUI";
-import {
-  AlignComp,
-  FontFamily,
-  FontSize,
-  FontStyleComp,
-  LineHeightComp,
-  LinkButton,
-  TextColor,
-} from "./ToolbarComp";
-
-export const TextToolbar = defineComponent({
-  props: {
-    component: any<DesignComp>().isRequired,
-  },
-  setup(props) {
-    const { store, actions, controls } = useEditor();
-
-    const toolbarColumns = [
-      {
-        dataIndex: "fontFamily",
-        component: FontFamily,
-        props: {
-          class: "w-180px",
-        },
-      },
-      {
-        label: "字号",
-        dataIndex: "fontSize",
-        component: FontSize,
-      },
-      {
-        label: "字体颜色",
-        dataIndex: "fontColor",
-        component: TextColor,
-      },
-      {
-        label: "加粗",
-        dataIndex: "bold",
-        component: (props: any) => (
-          <FontStyleComp icon={<IconTextBold />} {...props} />
-        ),
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        label: "斜体",
-        dataIndex: "italic",
-        component: (props: any) => (
-          <FontStyleComp icon={<IconTextItalic />} {...props} />
-        ),
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        label: "下划线",
-        dataIndex: "underline",
-        component: (props: any) => (
-          <FontStyleComp icon={<IconTextUnderline />} {...props} />
-        ),
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        label: "删除线",
-        dataIndex: "strikethrough",
-        component: (props: any) => (
-          <FontStyleComp icon={<IconStrikethrough />} {...props} />
-        ),
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        component: () => (
-          <Divider
-            type="vertical"
-            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
-          />
-        ),
-      },
-      {
-        label: "对齐方式",
-        dataIndex: "alignment",
-        component: AlignComp,
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        label: "行高",
-        dataIndex: "lineHeight",
-        component: LineHeightComp,
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        component: () => (
-          <Divider
-            type="vertical"
-            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
-          />
-        ),
-      },
-      {
-        label: "链接",
-        dataIndex: "link",
-        component: (props: any) => (
-          <LinkButton icon={<LinkOutlined />} {...props} />
-        ),
-        changeExtra: (record: any) => {
-          record.value = record.value.value;
-          return record;
-        },
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        component: () => (
-          <Divider
-            type="vertical"
-            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
-          />
-        ),
-      },
-    ];
-    const changeVal = (e: { dataIndex: string; value: any }) => {
-      const editor = controls.textEditor;
-      if (!editor) {
-        return;
-      }
-      editor.execute(e.dataIndex, e.value);
-      console.log("change", e);
-      setTimeout(() => {
-        const selection = window.getSelection();
-        selection?.removeAllRanges();
-        editor.editing.view.focus();
-      }, 100);
-    };
-    return () => {
-      const { component } = props;
-      return (
-        <div class={[TextToolbarStyle, "flex items-center"]} id="text_toolbar">
-          <TextToolbarsUI
-            editor={controls.textEditor}
-            columns={toolbarColumns}
-            onChange={changeVal}
-          />
-        </div>
-      );
-    };
-  },
-});
-const TextToolbarStyle = css``;

src/modules/editor/components/CompUI/basicUI/Text/ckeditor-letter-spacing/LetterSpacingCommand.ts

@@ -0,0 +1,74 @@
+import Command from "@ckeditor/ckeditor5-core/src/command";
+import first from "@ckeditor/ckeditor5-utils/src/first";
+
+const Letter_Spacing = "letterSpacing";
+
+export default class LetterSpacingCommand extends Command {
+  refresh() {
+    const firstBlock = first(
+      this.editor.model.document.selection.getSelectedBlocks()
+    );
+
+    this.isEnabled = !!firstBlock && this._canSetLetterSpacing(firstBlock);
+
+    this.value =
+      this.isEnabled && firstBlock?.hasAttribute(Letter_Spacing)
+        ? firstBlock.getAttribute(Letter_Spacing)
+        : "1";
+  }
+
+  execute(options: any) {
+    const editor = this.editor;
+    const model = editor.model;
+    const doc = model.document;
+
+    console.log(model.schema.getDefinitions());
+
+    // const value = '0'
+    const value = options.value;
+
+    model.change((writer) => {
+      const blocks = Array.from(doc.selection.getSelectedBlocks()).filter(
+        (block) => this._canSetLetterSpacing(block)
+      );
+      const currentLetterSpacing = blocks[0].getAttribute(Letter_Spacing);
+
+      const removeLetterSpacing =
+        currentLetterSpacing === value || typeof value === "undefined";
+
+      console.log(
+        value,
+        currentLetterSpacing === value,
+        typeof value === "undefined"
+      );
+
+      if (removeLetterSpacing) {
+        removeLetterSpacingFromSelection(blocks, writer);
+      } else {
+        setLetterSpacingOnSelection(blocks, writer, value);
+      }
+    });
+  }
+
+  _canSetLetterSpacing(block: any) {
+    return this.editor.model.schema.checkAttribute(block, Letter_Spacing);
+  }
+}
+
+function removeLetterSpacingFromSelection(blocks: any, writer: any) {
+  for (const block of blocks) {
+    console.log("removing");
+    writer.removeAttribute(Letter_Spacing, block);
+  }
+}
+
+function setLetterSpacingOnSelection(
+  blocks: any,
+  writer: any,
+  LetterSpacing: any
+) {
+  for (const block of blocks) {
+    console.log("setting", block, LetterSpacing);
+    writer.setAttribute(Letter_Spacing, LetterSpacing, block);
+  }
+}

src/modules/editor/components/CompUI/basicUI/Text/ckeditor-letter-spacing/LetterSpacingEditing.ts

@@ -0,0 +1,36 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+// import { isSupported, buildDefinition } from "./utils";
+import LetterSpacingCommand from "./LetterSpacingCommand";
+import HeadlessEditor from "../EditorCustom";
+
+export default class LetterSpacingEditing extends Plugin {
+  constructor(editor: HeadlessEditor) {
+    super(editor);
+  }
+
+  /**
+   * @inheritDoc
+   */
+  init() {
+    const editor = this.editor;
+    const schema = editor.model.schema;
+
+    // const enabledOptions = editor.config
+    //   .get("lineHeight.options")
+    //   .map((option:any) => String(option))
+    //   .filter(isSupported); // filter
+
+    schema.extend("$block", { allowAttributes: "letterSpacing" });
+    editor.model.schema.setAttributeProperties("letterSpacing", {
+      isFormatting: true,
+    });
+
+    // const definition = buildDefinition(
+    //   enabledOptions /* .filter( option => !isDefault( option ) ) */
+    // );
+
+    // editor.conversion.attributeToAttribute(definition);
+
+    editor.commands.add("letterSpacing", new LetterSpacingCommand(editor));
+  }
+}

src/modules/editor/components/CompUI/basicUI/Text/ckeditor-letter-spacing/index.ts

@@ -0,0 +1,12 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import LetterSpacingEditing from "./LetterSpacingEditing";
+
+export default class LetterSpacing extends Plugin {
+  static get requires() {
+    return [LetterSpacingEditing];
+  }
+
+  static get pluginName() {
+    return "LetterSpacing";
+  }
+}

src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

@@ -6,7 +6,6 @@ import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
 import HeadlessEditor from "./EditorCustom";
-import viewToPlainText from "@ckeditor/ckeditor5-clipboard/src/utils/viewtoplaintext";
 export const Component = defineComponent({
   props: {
     compId: string().def(""),

src/modules/editor/components/CompUI/basicUI/Text/index.ts

@@ -1,7 +1,7 @@
 import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createCompHooks } from "../../defines/createCompHooks";
-import { TextToolbar } from "./TextToolbar";
+import { TextToolForm } from "./TextToolForm";
 export { Component } from "./component2";
 
 export const options = {
@@ -17,11 +17,14 @@ export const { createComp, useCompData } = createCompHooks({
 });
 
 // export const Form = TextForm;
-export const Toolbar = TextToolbar;
-export const Form = createAttrsForm([
-  // {
-  //   label: "文本",
-  //   dataIndex: "value",
-  //   component: "Input",
-  // },
-]);
+
+export const Form = createAttrsForm(
+  [
+    // {
+    //   label: "文本",
+    //   dataIndex: "value",
+    //   component: "Input",
+    // },
+  ],
+  TextToolForm
+);

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -7,12 +7,16 @@ import { Size } from "../formItems/Size";
 import Slider from "../formItems/Slider";
 import { createColorOpts } from "./formOpts/createColorOpts";
 import { Divider } from "ant-design-vue";
+import { GroupNumber } from "../formItems/GroupNumber";
 
 export const layoutColumns: ColumnItem[] = [
   {
-    // label: "尺寸",
+    label: "尺寸",
     dataIndex: "layout.size",
-    component: Size,
+    component: GroupNumber,
+    props: {
+      labels: ["宽度", "高度"],
+    },
   },
   // {
   //   label: "对齐",
@@ -205,7 +209,7 @@ export const bgColumns: ColumnItem[] = [
   // },
 ];
 
-export function createAttrsForm(valueColumns: ColumnItem[]) {
+export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
   return defineComponent({
     props: {
       component: any<DesignComp>().isRequired,
@@ -232,6 +236,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
                 <Divider></Divider>
               </>
             ) : null}
+            {columnsUI && <columnsUI component={component}/>}
             <div>布局</div>
             <FormUI
               data={component}

src/modules/editor/components/Viewport/Slider/SliderLeft/CustomComps.tsx

@@ -26,10 +26,10 @@ const compList = [
   // "Cards15",
   "Cover",
   "Cover2",
-  "Text1",
-  "Title1",
-  "Title2",
-  "Title3",
+  // "Text1",
+  // "Title1",
+  // "Title2",
+  // "Title3",
 ];
 
 export default defineUI({

src/modules/editor/controllers/SelectCtrl/index.ts

@@ -587,7 +587,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     let objs = this.store.selected.slice(0);
     let lastId = outs[outs.length-1];
    
-    if (e.ctrlKey) {
+    if (e.shiftKey) {
       objs.forEach(o=>{
         if (outs.indexOf(o) == -1) {
           outs.push(o);
@@ -596,7 +596,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
     
     let selected = outs;
-    if (e.shiftKey) {//反选
+    if (e.ctrlKey) {//反选
       selected = [];
       objs.forEach(o=>{
          if (outs.indexOf(o) == -1) selected.push(o); 

src/modules/editor/module/actions/edit.tsx

@@ -620,7 +620,6 @@ export const editActions = EditorModule.action({
   },
   // 组件重命名
   async resetCompName(comp: DesignComp) {
-    console.log("comp.title: ", comp);
     const res = await queenApi.showInput({
       title: "重命名",
       defaultValue: comp.title,

src/modules/editor/objects/Toolbars/comps.ts

@@ -1,12 +1,12 @@
-import { createToolbars } from "./default";
-import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
+// import { createToolbars } from "./default";
+// import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
 
-export const Toolbars = createToolbars( {
-    text: {
-        component: Toolbar,
-        getVisible: (comp) =>  !!comp && comp.compKey == "Text",
-        onClick(comp) {
-            // this.actions.setCompLayer(comp, -1);
-        },
-    },
-});
+// export const Toolbars = createToolbars( {
+//     text: {
+//         component: Toolbar,
+//         getVisible: (comp) =>  !!comp && comp.compKey == "Text",
+//         onClick(comp) {
+//             // this.actions.setCompLayer(comp, -1);
+//         },
+//     },
+// });

src/modules/editor/objects/Toolbars/default.ts

@@ -92,6 +92,9 @@ export const toolbars = createToolbars({
   // 重命名
   rename: {
     component: TipIcons.Rename,
+    getVisible(comp) {
+      return comp.compKey == "Text" ? false : true;
+    },
     onClick(comp) {
       this.actions.resetCompName(comp);
     },

src/modules/editor/objects/Toolbars/topToolbars.ts

@@ -1,5 +1,5 @@
 import {toolbars, ToolbarItem } from "./default";
-import { Toolbars } from "./comps";
+// import { Toolbars } from "./comps";
 import { toolbar } from "../../components/CompUI/basicUI/Polygon/toolbar";
 import { LayoutToolbars } from "./layout";
 
@@ -29,7 +29,7 @@ export const TopToolbarsLeft: ToolbarItem[] = [
     LayoutToolbars.SameWidth,
     LayoutToolbars.SameHeight,
     
-    Toolbars.text,
+    // Toolbars.text,
     toolbar,
 ]