@zuilib/text-editor 0.2.1 → 0.3.1

package/dist/styles.css

@@ -254,6 +254,12 @@
   background: color-mix(in srgb, currentColor 8%, transparent);
 }
 
+.zui-text-editor-toolbar-button:disabled {
+  opacity: 0.3;
+  cursor: default;
+  background: transparent;
+}
+
 .zui-text-editor-toolbar-button.is-active {
   opacity: 1;
   background: color-mix(in srgb, currentColor 12%, transparent);
@@ -269,6 +275,7 @@
 /* Tables — artifact-style: rounded outer border, subtle header, tight rules */
 .zui-table {
   width: 100%;
+  max-width: 100%;
   margin: 1rem 0;
   border-collapse: separate;
   border-spacing: 0;
@@ -311,11 +318,42 @@
   background: color-mix(in srgb, #6965db 14%, transparent);
 }
 
+/*
+ * Floating full-width / content-width toggle, straddling the top-right corner
+ * of the table the caret is in (positioned within .zui-text-editor-main). It
+ * stays inside the table's own top margin so it never covers the previous
+ * paragraph. Content width itself is an inline style on the <table> (see
+ * tableWidth.ts).
+ */
+.zui-table-width {
+  position: absolute;
+  z-index: 5;
+  display: flex;
+  gap: 0.125rem;
+  padding: 0.125rem;
+  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  border-radius: 0.5rem;
+  background: #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  transform: translateY(-70%);
+}
+
+.dark .zui-table-width {
+  background: #232329;
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
 /* Drawing canvas */
 .zui-drawing {
   margin: 1rem 0;
 }
 
+.zui-drawing-canvas.is-content-width {
+  width: fit-content;
+  max-width: 100%;
+}
+
 .zui-drawing-canvas {
   position: relative;
   border-radius: 0.75rem;
@@ -327,6 +365,7 @@
 .zui-drawing-surface {
   display: block;
   width: 100%;
+  max-width: 100%;
   touch-action: none;
   background-color: #ffffff;
   background-image: radial-gradient(
@@ -410,6 +449,11 @@
   pointer-events: auto;
 }
 
+/* Canvas-level controls (width) sit at the far right of the toolbar row */
+.zui-drawing-toolbar-group-end {
+  margin-left: auto;
+}
+
 .zui-drawing-tool {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "ZUI — A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",
@@ -13,6 +13,10 @@
     "DRAWING_FORMAT.md",
     "CHANGELOG.md"
   ],
+  "scripts": {
+    "build": "tsup",
+    "test": "node tests/roundtrip.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -61,9 +65,5 @@
     "design-system",
     "react",
     "typescript"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "test": "node tests/roundtrip.mjs"
-  }
-}
+  ]
+}