Remove "table" from default inlineRendering

README.md

@@ -44,7 +44,7 @@ In [settings.json](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#a
     "hidePreviewButtons": true,
     "syntaxAutoDetect": false,
     "imageHoverPreview": false,
-    "inlineRendering": ["table", "math", "mermaid"],
+    "inlineRendering": ["math", "mermaid"],
     "themeName": "github",
     "styledHtmlColorScheme": "auto",
     "mathDelimiters": [],
@@ -68,7 +68,7 @@ In [settings.json](https://github.com/MarkEdit-app/MarkEdit/wiki/Customization#a
 - `syntaxAutoDetect`: Whether to enable automatic language detection for syntax highlighting in code blocks (not applicable for lite build).
 - `imageHoverPreview`: Whether to enable image preview on hover.
 - `inlineImages` (deprecated): Whether Mixed mode renders images inline, defaults to `false`. Use `inlineRendering` instead; an explicit `inlineRendering` array takes precedence.
-- `inlineRendering`: Types rendered inline in Mixed mode: `"table"`, `"math"`, `"mermaid"`, `"image"`, and `"html"`. Defaults to `["table", "math", "mermaid"]`; use `[]` to disable all rendering. Math and Mermaid rendering require the full build.
+- `inlineRendering`: Types rendered inline in Mixed mode: `"table"`, `"math"`, `"mermaid"`, `"image"`, and `"html"`. Defaults to `["math", "mermaid"]`; use `[]` to disable all rendering. Math and Mermaid rendering require the full build.
 - `themeName`: Set the preview color theme, available themes can be found in the [`styles/themes`](styles/themes) folder. Use `"none"` to disable preview styling and render the raw HTML.
 - `styledHtmlColorScheme`: Determine the color scheme of saving styled html files, valid values are `light`, `dark`, and `auto`.
 - `mathDelimiters`: Customize math delimiters for KaTeX rendering (not applicable for lite build), each delimiter object has `left`, `right`, and `display` properties, defaults to `$...$`, `$$...$$`, `\(...\)`, and `\[...\]`.

src/support/settings.ts

@@ -29,7 +29,7 @@ export const inlineImages = toBoolean(rootValue.inlineImages, false);
 export const inlineRendering: readonly InlineRenderingType[] = Array.isArray(rootValue.inlineRendering)
   ? rootValue.inlineRendering.filter((value): value is InlineRenderingType =>
     value === 'image' || value === 'table' || value === 'math' || value === 'mermaid' || value === 'html')
-  : inlineImages ? ['image', 'table', 'math', 'mermaid'] : ['table', 'math', 'mermaid'];
+  : inlineImages ? ['image', 'math', 'mermaid'] : ['math', 'mermaid'];
 
 export const themeName = (rootValue.themeName ?? 'github') as string;
 export const showRawHtml = themeName === 'none';

tests/hiddenSyntax/block.test.ts

@@ -33,7 +33,7 @@ describe('Inline rendering options', () => {
   test.each(options.map(rendering => ({ rendering })))('renders only the configured types: $rendering', ({ rendering }) => {
     editor.setUp(source, createHiddenSyntaxExtension(rendering));
     window.editor.dispatch({ selection: { anchor: source.length } });
-    const enabled = rendering ?? ['table', 'math', 'mermaid'];
+    const enabled = rendering ?? ['math', 'mermaid'];
     for (const type of Object.keys(selectors) as InlineRenderingType[]) {
       expect(window.editor.dom.querySelector(selectors[type]) !== null).toBe(enabled.includes(type));
     }

tests/hiddenSyntax/table.test.ts

@@ -5,7 +5,7 @@ import { EditorSelection, EditorState } from '@codemirror/state';
 import { EditorView, keymap, runScopeHandlers } from '@codemirror/view';
 import { standardKeymap } from '@codemirror/commands';
 import { codeFolding, foldedRanges, foldEffect, unfoldEffect } from '@codemirror/language';
-import { hiddenSyntaxExtension } from '../../src/hiddenSyntax';
+import { createHiddenSyntaxExtension } from '../../src/hiddenSyntax';
 import { TableWidget } from '../../src/hiddenSyntax/components/table';
 import * as renderer from '../../src/render';
 import * as editor from '../support/editor';
@@ -14,13 +14,14 @@ const editorConfig = vi.hoisted(() => ({ theme: 'github-light' }));
 vi.mock('markedit-api', () => ({ MarkEdit: { editorConfig } }));
 beforeEach(() => { editorConfig.theme = 'github-light'; });
 
+const tableSyntaxExtension = createHiddenSyntaxExtension(['table']);
 const table = '| Name | Value |\n| :--- | ---: |\n| **bold** | [link][target] |';
 const source = `${table}\n\nAfter\n\n[target]: https://example.com`;
 const widget = () => window.editor.dom.querySelector('.cm-md-syntaxHiddenTable');
 const renderedTable = () => widget()?.shadowRoot?.querySelector('table');
 
 function setUp(text = source) {
-  editor.setUp(text, [hiddenSyntaxExtension, codeFolding(), EditorState.allowMultipleSelections.of(true)]);
+  editor.setUp(text, [tableSyntaxExtension, codeFolding(), EditorState.allowMultipleSelections.of(true)]);
   window.editor.dispatch({ selection: { anchor: text.length } });
 }
 
@@ -81,7 +82,7 @@ describe('Hidden tables', () => {
     ['github-light', false, '#ffffff', '#1f2328'],
   ] as const)('uses the %s editor palette', (name, isDark, background, foreground) => {
     editorConfig.theme = name;
-    editor.setUp(source, [hiddenSyntaxExtension, EditorView.darkTheme.of(isDark)]);
+    editor.setUp(source, [tableSyntaxExtension, EditorView.darkTheme.of(isDark)]);
     window.editor.dispatch({ selection: { anchor: source.length } });
 
     const css = widget()?.shadowRoot?.querySelector('style')?.textContent;
@@ -91,7 +92,7 @@ describe('Hidden tables', () => {
 
   test('updates the palette in place and stops observing after destruction', () => {
     editorConfig.theme = 'cobalt';
-    editor.setUp(source, [hiddenSyntaxExtension, EditorView.darkTheme.of(true)]);
+    editor.setUp(source, [tableSyntaxExtension, EditorView.darkTheme.of(true)]);
     window.editor.dispatch({ selection: { anchor: source.length } });
     const container = widget();
     const theme = container?.shadowRoot?.querySelector('style');
@@ -202,7 +203,7 @@ describe('Hidden tables', () => {
   test.each(['ArrowRight', 'ArrowLeft'])('%s reveals source at the table boundary', async key => {
     const prefix = 'Before\n\n';
     const text = `${prefix}${table}\n# After\n\n[target]: https://example.com`;
-    editor.setUp(text, [hiddenSyntaxExtension, keymap.of(standardKeymap)]);
+    editor.setUp(text, [tableSyntaxExtension, keymap.of(standardKeymap)]);
 
     const boundary = key === 'ArrowRight' ? prefix.length : prefix.length + table.length;
     const start = boundary + (key === 'ArrowRight' ? -1 : 1);
@@ -221,7 +222,7 @@ describe('Hidden tables', () => {
   ] as const)('preserves CodeMirror table-skipping movement for %s, shift: %s', async (key, shiftKey) => {
     const prefix = 'Before\n\n';
     const text = `${prefix}${source}`;
-    editor.setUp(text, [hiddenSyntaxExtension, keymap.of(standardKeymap)]);
+    editor.setUp(text, [tableSyntaxExtension, keymap.of(standardKeymap)]);
 
     const before = prefix.length - 1;
     const after = prefix.length + table.length + 1;
@@ -270,7 +271,7 @@ describe('Hidden tables', () => {
 
   test.each(['ArrowLeft', 'ArrowRight', 'typing'])('reveals source on %s after vertical arrival at the next blank line', async action => {
     const text = `${table}\n  \nAfter\n\n[target]: https://example.com`;
-    editor.setUp(text, [hiddenSyntaxExtension, keymap.of(standardKeymap)]);
+    editor.setUp(text, [tableSyntaxExtension, keymap.of(standardKeymap)]);
     const start = table.length + 2;
     window.editor.dispatch({ selection: EditorSelection.create([EditorSelection.cursor(start, 0, undefined, 24)]) });
     await vi.waitFor(() => expect(renderedTable()).toBeTruthy());

tests/settings.test.ts

@@ -12,7 +12,7 @@ describe('Inline rendering settings', () => {
   test.each([true, false])('preserves deprecated inlineImages: %s', async enabled => {
     settings.inlineImages = enabled;
     const { inlineRendering } = await import('../src/support/settings');
-    expect(inlineRendering).toEqual(enabled ? ['image', 'table', 'math', 'mermaid'] : ['table', 'math', 'mermaid']);
+    expect(inlineRendering).toEqual(enabled ? ['image', 'math', 'mermaid'] : ['math', 'mermaid']);
   });
 
   test.each([
@@ -29,7 +29,7 @@ describe('Inline rendering settings', () => {
   test.each([undefined, null, false, 'image', {}])('uses defaults for a non-array value: %j', async value => {
     settings.inlineRendering = value;
     const { inlineRendering } = await import('../src/support/settings');
-    expect(inlineRendering).toEqual(['table', 'math', 'mermaid']);
+    expect(inlineRendering).toEqual(['math', 'mermaid']);
   });
 
   test.each([