@bendyline/squisq-editor-react 1.1.1 → 1.2.1

package/src/__tests__/tiptapBridge.test.ts

@@ -0,0 +1,290 @@
+import { describe, it, expect } from 'vitest';
+import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
+
+// ---------------------------------------------------------------------------
+// markdownToTiptap
+// ---------------------------------------------------------------------------
+
+describe('markdownToTiptap', () => {
+  it('returns empty paragraph for empty input', () => {
+    expect(markdownToTiptap('')).toBe('<p></p>');
+    expect(markdownToTiptap('   ')).toBe('<p></p>');
+  });
+
+  it('converts a plain paragraph', () => {
+    const html = markdownToTiptap('Hello world');
+    expect(html).toContain('<p>');
+    expect(html).toContain('Hello world');
+  });
+
+  it('converts headings h1-h3', () => {
+    expect(markdownToTiptap('# Title')).toContain('<h1');
+    expect(markdownToTiptap('## Subtitle')).toContain('<h2');
+    expect(markdownToTiptap('### Section')).toContain('<h3');
+  });
+
+  it('converts bold text', () => {
+    const html = markdownToTiptap('This is **bold** text');
+    expect(html).toContain('<strong>bold</strong>');
+  });
+
+  it('converts italic text', () => {
+    const html = markdownToTiptap('This is *italic* text');
+    expect(html).toContain('<em>italic</em>');
+  });
+
+  it('converts strikethrough text', () => {
+    const html = markdownToTiptap('This is ~~deleted~~ text');
+    expect(html).toContain('<s>deleted</s>');
+  });
+
+  it('converts inline code', () => {
+    const html = markdownToTiptap('Use `console.log` here');
+    expect(html).toContain('<code>console.log</code>');
+  });
+
+  it('converts links', () => {
+    const html = markdownToTiptap('Visit [Example](https://example.com)');
+    expect(html).toContain('href="https://example.com"');
+    expect(html).toContain('Example');
+  });
+
+  it('converts images', () => {
+    const html = markdownToTiptap('![Logo](logo.png)');
+    expect(html).toContain('alt="Logo"');
+    expect(html).toContain('src="logo.png"');
+  });
+
+  it('converts fenced code blocks', () => {
+    const md = '```javascript\nconst x = 1;\n```';
+    const html = markdownToTiptap(md);
+    expect(html).toContain('<pre>');
+    expect(html).toContain('<code');
+    expect(html).toContain('language-javascript');
+    expect(html).toContain('const x = 1;');
+  });
+
+  it('converts unordered lists', () => {
+    const md = '- Item one\n- Item two\n- Item three';
+    const html = markdownToTiptap(md);
+    expect(html).toContain('<ul>');
+    expect(html).toContain('<li>');
+    expect(html).toContain('Item one');
+    expect(html).toContain('Item two');
+  });
+
+  it('converts ordered lists', () => {
+    const md = '1. First\n2. Second\n3. Third';
+    const html = markdownToTiptap(md);
+    expect(html).toContain('<ol>');
+    expect(html).toContain('<li>');
+    expect(html).toContain('First');
+  });
+
+  it('converts blockquotes', () => {
+    const md = '> This is a quote';
+    const html = markdownToTiptap(md);
+    expect(html).toContain('<blockquote>');
+    expect(html).toContain('This is a quote');
+  });
+
+  it('converts horizontal rules', () => {
+    const md = 'Before\n\n---\n\nAfter';
+    const html = markdownToTiptap(md);
+    expect(html).toContain('<hr');
+  });
+
+  it('converts markdown tables', () => {
+    const md = '| A | B |\n| --- | --- |\n| 1 | 2 |';
+    const html = markdownToTiptap(md);
+    expect(html).toContain('<table>');
+    expect(html).toContain('<thead>');
+    expect(html).toContain('<th>');
+    expect(html).toContain('<td>');
+  });
+
+  it('handles table column alignment', () => {
+    const md = '| Left | Center | Right |\n| :--- | :---: | ---: |\n| a | b | c |';
+    const html = markdownToTiptap(md);
+    expect(html).toContain('text-align: left');
+    expect(html).toContain('text-align: center');
+    expect(html).toContain('text-align: right');
+  });
+
+  it('escapes HTML special characters in text', () => {
+    const html = markdownToTiptap('Use <div> & "quotes"');
+    expect(html).toContain('&lt;div&gt;');
+    expect(html).toContain('&amp;');
+  });
+
+  it('normalizes \\r\\n line endings', () => {
+    const html = markdownToTiptap('Line one\r\nLine two');
+    // Should not contain raw \r
+    expect(html).not.toContain('\r');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// tiptapToMarkdown
+// ---------------------------------------------------------------------------
+
+describe('tiptapToMarkdown', () => {
+  it('returns empty string for empty paragraph', () => {
+    expect(tiptapToMarkdown('')).toBe('');
+    expect(tiptapToMarkdown('<p></p>')).toBe('');
+  });
+
+  it('converts a paragraph to plain text', () => {
+    const md = tiptapToMarkdown('<p>Hello world</p>');
+    expect(md).toContain('Hello world');
+  });
+
+  it('converts headings', () => {
+    expect(tiptapToMarkdown('<h1>Title</h1>')).toContain('# Title');
+    expect(tiptapToMarkdown('<h2>Sub</h2>')).toContain('## Sub');
+    expect(tiptapToMarkdown('<h3>Section</h3>')).toContain('### Section');
+  });
+
+  it('converts strong tags to bold markdown', () => {
+    const md = tiptapToMarkdown('<p>This is <strong>bold</strong> text</p>');
+    expect(md).toContain('**bold**');
+  });
+
+  it('converts em tags to italic markdown', () => {
+    const md = tiptapToMarkdown('<p>This is <em>italic</em> text</p>');
+    expect(md).toContain('*italic*');
+  });
+
+  it('converts s/del tags to strikethrough', () => {
+    const md = tiptapToMarkdown('<p>This is <s>deleted</s> text</p>');
+    expect(md).toContain('~~deleted~~');
+  });
+
+  it('converts code tags to inline code', () => {
+    const md = tiptapToMarkdown('<p>Use <code>foo</code> here</p>');
+    expect(md).toContain('`foo`');
+  });
+
+  it('converts links', () => {
+    const md = tiptapToMarkdown('<p><a href="https://example.com">Example</a></p>');
+    expect(md).toContain('[Example](https://example.com)');
+  });
+
+  it('converts code blocks with language', () => {
+    const md = tiptapToMarkdown('<pre><code class="language-js">const x = 1;</code></pre>');
+    expect(md).toContain('```js');
+    expect(md).toContain('const x = 1;');
+    expect(md).toContain('```');
+  });
+
+  it('converts code blocks without language', () => {
+    const md = tiptapToMarkdown('<pre><code>plain code</code></pre>');
+    expect(md).toContain('```');
+    expect(md).toContain('plain code');
+  });
+
+  it('converts blockquotes', () => {
+    const md = tiptapToMarkdown('<blockquote><p>A wise quote</p></blockquote>');
+    expect(md).toContain('> ');
+    expect(md).toContain('A wise quote');
+  });
+
+  it('converts horizontal rules', () => {
+    const md = tiptapToMarkdown('<p>Before</p><hr><p>After</p>');
+    expect(md).toContain('---');
+  });
+
+  it('converts unordered lists', () => {
+    const md = tiptapToMarkdown('<ul><li><p>Alpha</p></li><li><p>Beta</p></li></ul>');
+    expect(md).toContain('- Alpha');
+    expect(md).toContain('- Beta');
+  });
+
+  it('converts ordered lists', () => {
+    const md = tiptapToMarkdown('<ol><li><p>First</p></li><li><p>Second</p></li></ol>');
+    expect(md).toContain('1. First');
+    expect(md).toContain('2. Second');
+  });
+
+  it('converts tables', () => {
+    const html =
+      '<table><thead><tr><th>Name</th><th>Age</th></tr></thead>' +
+      '<tbody><tr><td>Alice</td><td>30</td></tr></tbody></table>';
+    const md = tiptapToMarkdown(html);
+    expect(md).toContain('| Name | Age |');
+    expect(md).toContain('| --- | --- |');
+    expect(md).toContain('| Alice | 30 |');
+  });
+
+  it('preserves template annotations in headings', () => {
+    const html = '<h2 data-template="statHighlight" data-template-params="stat=42%">Stats</h2>';
+    const md = tiptapToMarkdown(html);
+    expect(md).toContain('## Stats');
+    expect(md).toContain('{[statHighlight');
+    expect(md).toContain('stat=42%');
+  });
+
+  it('unescapes HTML entities', () => {
+    const md = tiptapToMarkdown('<pre><code>&lt;div&gt; &amp; &quot;test&quot;</code></pre>');
+    expect(md).toContain('<div>');
+    expect(md).toContain('&');
+    expect(md).toContain('"test"');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Round-trip tests
+// ---------------------------------------------------------------------------
+
+describe('round-trip: markdownToTiptap → tiptapToMarkdown', () => {
+  const roundTrip = (md: string) => tiptapToMarkdown(markdownToTiptap(md));
+
+  it('preserves plain text', () => {
+    expect(roundTrip('Hello world')).toContain('Hello world');
+  });
+
+  it('preserves headings', () => {
+    const result = roundTrip('## My Heading');
+    expect(result).toContain('## My Heading');
+  });
+
+  it('preserves bold text', () => {
+    expect(roundTrip('Some **bold** here')).toContain('**bold**');
+  });
+
+  it('preserves italic text', () => {
+    expect(roundTrip('Some *italic* here')).toContain('*italic*');
+  });
+
+  it('preserves inline code', () => {
+    expect(roundTrip('Use `code` here')).toContain('`code`');
+  });
+
+  it('preserves code blocks', () => {
+    const md = '```js\nconst x = 1;\n```';
+    const result = roundTrip(md);
+    expect(result).toContain('```js');
+    expect(result).toContain('const x = 1;');
+  });
+
+  it('preserves links', () => {
+    const result = roundTrip('Click [here](https://example.com)');
+    expect(result).toContain('[here](https://example.com)');
+  });
+
+  it('preserves blockquotes', () => {
+    expect(roundTrip('> Important note')).toContain('> Important note');
+  });
+
+  it('preserves unordered lists', () => {
+    const result = roundTrip('- Alpha\n- Beta');
+    expect(result).toContain('- Alpha');
+    expect(result).toContain('- Beta');
+  });
+
+  it('preserves ordered lists', () => {
+    const result = roundTrip('1. First\n2. Second');
+    expect(result).toContain('1. First');
+    expect(result).toContain('2. Second');
+  });
+});

package/src/styles/editor.css

@@ -31,6 +31,8 @@
 
 .squisq-view-tab {
   padding: 6px 16px;
+  min-width: 72px;
+  text-align: center;
   border: none;
   background: transparent;
   color: #6b7280;
@@ -57,9 +59,10 @@
 .squisq-toolbar {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding: 0 12px 0 0;
   gap: 2px;
+  background: rgba(0, 0, 0, 0.07);
 }
 
 /* ─── View Tabs (inside toolbar) ─────────────────────── */
@@ -67,9 +70,9 @@
 .squisq-toolbar-view-tabs {
   display: flex;
   gap: 0;
-  margin-right: 12px;
+  margin-right: 0;
   padding: 0 16px 0 12px;
-  background: rgba(0, 0, 0, 0.07);
+  background: #ffffff;
   border-right: 1px solid rgba(0, 0, 0, 0.12);
   align-self: stretch;
   align-items: center;
@@ -79,6 +82,9 @@
   display: flex;
   align-items: center;
   gap: 2px;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
 }
 
 .squisq-toolbar-view-tab {
@@ -95,6 +101,15 @@
     border-color 0.15s;
 }
 
+.squisq-toolbar-view-tab::after {
+  content: attr(data-label);
+  display: block;
+  font-weight: 600;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
 .squisq-toolbar-view-tab:hover {
   color: #111827;
 }
@@ -155,6 +170,98 @@
   color: #1d4ed8;
 }
 
+/* ─── Toolbar: narrow screen adjustments ───────────────── */
+
+@media (max-width: 768px) {
+  .squisq-toolbar-view-tabs {
+    padding: 0 8px;
+  }
+}
+
+/* ─── Toolbar Overflow Menu ──────────────────────────── */
+
+.squisq-toolbar-overflow {
+  position: relative;
+  flex-shrink: 0;
+  margin-left: 2px;
+}
+
+.squisq-toolbar-overflow-trigger {
+  font-size: 16px;
+  letter-spacing: 1px;
+}
+
+.squisq-toolbar-overflow-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 100;
+  min-width: 180px;
+  padding: 4px 0;
+  margin-top: 4px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.squisq-toolbar-overflow-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  color: #374151;
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.squisq-toolbar-overflow-item:hover {
+  background: #f3f4f6;
+}
+
+.squisq-toolbar-overflow-item:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.squisq-toolbar-overflow-item--active {
+  color: #2563eb;
+  background: #eff6ff;
+}
+
+.squisq-toolbar-overflow-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.squisq-toolbar-overflow-item--danger {
+  color: #dc2626;
+}
+
+.squisq-toolbar-overflow-item--danger:hover {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.squisq-toolbar-overflow-template {
+  gap: 6px;
+  padding: 6px 12px;
+}
+
+.squisq-toolbar-overflow-template select {
+  flex: 1;
+  min-width: 0;
+}
+
 /* ─── Template Picker (toolbar) ──────────────────────── */
 
 .squisq-template-picker {
@@ -351,6 +458,130 @@
   font-weight: 600;
 }
 
+/* Tiptap table interaction — resize handles, selection, wrapper */
+
+.squisq-wysiwyg-editor th,
+.squisq-wysiwyg-editor td {
+  position: relative;
+}
+
+.squisq-wysiwyg-editor .tableWrapper {
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.squisq-wysiwyg-editor .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: #3b82f6;
+  pointer-events: none;
+}
+
+.squisq-wysiwyg-editor.resize-cursor {
+  cursor: col-resize;
+}
+
+.squisq-wysiwyg-editor .selectedCell::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(59, 130, 246, 0.12);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* ─── Table Controls (toolbar) ───────────────────────── */
+
+.squisq-table-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.squisq-table-controls-label {
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: 500;
+  margin-right: 4px;
+  white-space: nowrap;
+}
+
+.squisq-table-controls .squisq-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 5px;
+}
+
+.squisq-table-controls .squisq-toolbar-button svg {
+  display: block;
+  flex-shrink: 0;
+}
+
+.squisq-toolbar-button--danger {
+  color: #dc2626;
+}
+
+.squisq-toolbar-button--danger:hover {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+/* ─── Preview Controls ──────────────────────────────── */
+
+.squisq-preview-controls-inline {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 2px 0 2px 9px;
+}
+
+.squisq-preview-controls-inline .squisq-preview-control {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.squisq-preview-controls-compact {
+  position: relative;
+}
+
+.squisq-preview-controls-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 80;
+  background: var(--squisq-bg, #fff);
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  padding: 8px 12px;
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 180px;
+}
+
+.squisq-preview-control--compact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.squisq-preview-control--compact select {
+  flex: 1;
+  min-width: 0;
+}
+
 .squisq-wysiwyg-editor a {
   color: #2563eb;
   text-decoration: underline;
@@ -446,11 +677,11 @@
 
 /* Toolbar */
 .squisq-editor-shell[data-theme='dark'] .squisq-toolbar {
-  /* no border-top — sits directly in header */
+  background: rgba(255, 255, 255, 0.08);
 }
 
 .squisq-editor-shell[data-theme='dark'] .squisq-toolbar-view-tabs {
-  background: rgba(255, 255, 255, 0.08);
+  background: #111827;
   border-right-color: rgba(255, 255, 255, 0.15);
 }
 
@@ -495,6 +726,35 @@
   background: #4b5563;
 }
 
+/* Overflow menu (dark) */
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-overflow-menu {
+  background: #1f2937;
+  border-color: #374151;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-overflow-item {
+  color: #d1d5db;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-overflow-item:hover {
+  background: #374151;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-overflow-item--active {
+  color: #60a5fa;
+  background: #1e3a5f;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-overflow-item--danger {
+  color: #f87171;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-overflow-item--danger:hover {
+  background: #450a0a;
+  color: #fca5a5;
+}
+
 /* Template picker (dark) */
 .squisq-editor-shell[data-theme='dark'] .squisq-template-picker-label {
   color: #9ca3af;
@@ -575,6 +835,27 @@
   background: #1f2937;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor .column-resize-handle {
+  background: #60a5fa;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor .selectedCell::after {
+  background: rgba(96, 165, 250, 0.15);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-table-controls-label {
+  color: #9ca3af;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-button--danger {
+  color: #f87171;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-toolbar-button--danger:hover {
+  background: #450a0a;
+  color: #fca5a5;
+}
+
 .squisq-editor-shell[data-theme='dark'] .squisq-wysiwyg-editor a {
   color: #60a5fa;
 }
@@ -629,12 +910,6 @@
   .squisq-toolbar-view-tabs {
     margin-right: 0;
   }
-
-  .squisq-toolbar-actions {
-    flex-basis: 100%;
-    flex-wrap: wrap;
-    padding-top: 2px;
-  }
 }
 
 /* ─── Media Bin ──────────────────────────────────────── */