@bendyline/squisq-editor-react 0.1.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -46,8 +46,8 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "^0.1.2",
-    "@bendyline/squisq-react": "^0.1.3",
+    "@bendyline/squisq": "1.0.0",
+    "@bendyline/squisq-react": "1.0.0",
     "@monaco-editor/react": "^4.6.0",
     "@tiptap/extension-placeholder": "^2.11.0",
     "@tiptap/extension-table": "^2.11.0",

package/src/Toolbar.tsx

@@ -413,52 +413,57 @@ export function Toolbar({ className }: ToolbarProps) {
       </div>
 
       {/* Formatting buttons — hidden in preview mode */}
-      {!isPreview && <div className="squisq-toolbar-separator" />}
-      {!isPreview &&
-        groups.map((group, gi) => (
-          <div key={group} className="squisq-toolbar-group">
-            {gi > 0 && <div className="squisq-toolbar-separator" />}
-            {BUTTONS.filter((b) => b.group === group).map((btn) => {
-              const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
-              return (
-                <button
-                  key={btn.id}
-                  className={`squisq-toolbar-button${active ? ' squisq-toolbar-button--active' : ''}`}
-                  title={btn.title}
-                  onClick={() => handleAction(btn.id)}
-                  aria-label={btn.title}
-                  aria-pressed={active}
-                  style={btn.iconStyle}
-                >
-                  {btn.icon}
-                </button>
-              );
-            })}
-          </div>
-        ))}
+      {!isPreview && (
+        <div className="squisq-toolbar-actions">
+          {groups.map((group, gi) => (
+            <div key={group} className="squisq-toolbar-group">
+              {gi > 0 && <div className="squisq-toolbar-separator" />}
+              {BUTTONS.filter((b) => b.group === group).map((btn) => {
+                const active = isWysiwyg ? isTiptapActive(tiptapEditor, btn.id) : false;
+                return (
+                  <button
+                    key={btn.id}
+                    className={`squisq-toolbar-button${active ? ' squisq-toolbar-button--active' : ''}`}
+                    title={btn.title}
+                    onClick={() => handleAction(btn.id)}
+                    aria-label={btn.title}
+                    aria-pressed={active}
+                    style={btn.iconStyle}
+                  >
+                    {btn.icon}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
 
-      {/* Template picker — visible when cursor is in a heading (WYSIWYG) */}
-      {!isPreview && currentTemplate !== null && (
-        <>
-          <div className="squisq-toolbar-separator" />
-          <div className="squisq-toolbar-group squisq-template-picker">
-            <label className="squisq-template-picker-label" title="Block template for this heading">
-              Template:
-              <select
-                className="squisq-template-picker-select"
-                value={currentTemplate}
-                onChange={(e) => handleTemplatePick(e.target.value)}
-              >
-                <option value="">— none —</option>
-                {templateNames.map((name) => (
-                  <option key={name} value={name}>
-                    {name}
-                  </option>
-                ))}
-              </select>
-            </label>
-          </div>
-        </>
+          {/* Template picker — visible when cursor is in a heading (WYSIWYG) */}
+          {currentTemplate !== null && (
+            <>
+              <div className="squisq-toolbar-separator" />
+              <div className="squisq-toolbar-group squisq-template-picker">
+                <label
+                  className="squisq-template-picker-label"
+                  title="Block template for this heading"
+                >
+                  Template:
+                  <select
+                    className="squisq-template-picker-select"
+                    value={currentTemplate}
+                    onChange={(e) => handleTemplatePick(e.target.value)}
+                  >
+                    <option value="">— none —</option>
+                    {templateNames.map((name) => (
+                      <option key={name} value={name}>
+                        {name}
+                      </option>
+                    ))}
+                  </select>
+                </label>
+              </div>
+            </>
+          )}
+        </div>
       )}
     </div>
   );

package/src/styles/editor.css

@@ -57,6 +57,7 @@
 .squisq-toolbar {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   padding: 4px 12px;
   gap: 2px;
 }
@@ -69,6 +70,12 @@
   margin-right: 2px;
 }
 
+.squisq-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
 .squisq-toolbar-view-tab {
   padding: 4px 14px;
   border: none;
@@ -592,3 +599,17 @@
   background: #374151;
   color: #e5e7eb;
 }
+
+/* ─── Responsive: toolbar wraps on narrow viewports ──── */
+
+@media (max-width: 640px) {
+  .squisq-toolbar-view-tabs {
+    margin-right: 0;
+  }
+
+  .squisq-toolbar-actions {
+    flex-basis: 100%;
+    flex-wrap: wrap;
+    padding-top: 2px;
+  }
+}