From 26d5b47f6a1327e99a0bafbaab5b29ec0a8b6fa8 Mon Sep 17 00:00:00 2001 From: streamich Date: Fri, 14 Feb 2025 17:52:42 +0100 Subject: [PATCH 01/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20make=20highlight=20selection=20visible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/json-crdt-peritext-ui/plugins/cursor/constants.ts | 9 ++++++++- .../plugins/toolbar/RenderBlock.tsx | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/json-crdt-peritext-ui/plugins/cursor/constants.ts b/src/json-crdt-peritext-ui/plugins/cursor/constants.ts index c47c94e026..831a03ef03 100644 --- a/src/json-crdt-peritext-ui/plugins/cursor/constants.ts +++ b/src/json-crdt-peritext-ui/plugins/cursor/constants.ts @@ -1,6 +1,13 @@ export enum DefaultRendererColors { ActiveCursor = '#07f', InactiveCursor = 'rgba(127,127,127,.7)', - ActiveSelection = '#d7e9fd', + + /** + * Derived from #d7e9fd. 80% opacity used so that + * any inline formatting underneath the selection + * is still visible. + */ + ActiveSelection = 'rgba(196,223,253,.8)', + InactiveSelection = 'rgba(127,127,127,.2)', } diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderBlock.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderBlock.tsx index 74d5956cf4..7a20a69a24 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderBlock.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderBlock.tsx @@ -1,7 +1,7 @@ // biome-ignore lint: React is used for JSX import * as React from 'react'; -import type {BlockViewProps} from '../../react/BlockView'; import {CommonSliceType} from '../../../json-crdt-extensions'; +import type {BlockViewProps} from '../../react/BlockView'; export interface RenderBlockProps extends BlockViewProps { children: React.ReactNode; From f3070a530b2f1492231654a392a61ca26d8c7d5f Mon Sep 17 00:00:00 2001 From: streamich Date: Fri, 14 Feb 2025 18:03:08 +0100 Subject: [PATCH 02/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20add=20overline=20inline=20formatting=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx | 1 + src/json-crdt-peritext-ui/plugins/minimal/text.ts | 1 + src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx index 9261cabf98..a846c0163f 100644 --- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx @@ -51,6 +51,7 @@ export const TopToolbar: React.FC = ({ctx}) => { {inlineGroupButton(CommonSliceType.b, 'Bold')} {inlineGroupButton(CommonSliceType.i, 'Italic')} {inlineGroupButton(CommonSliceType.u, 'Underline')} + {inlineGroupButton(CommonSliceType.overline, 'Overline')} {inlineGroupButton(CommonSliceType.s, 'Strikethrough')} {inlineGroupButton(CommonSliceType.code, 'Code')} {inlineGroupButton(CommonSliceType.mark, 'Mark')} diff --git a/src/json-crdt-peritext-ui/plugins/minimal/text.ts b/src/json-crdt-peritext-ui/plugins/minimal/text.ts index 52d17be243..bc5a958d1f 100644 --- a/src/json-crdt-peritext-ui/plugins/minimal/text.ts +++ b/src/json-crdt-peritext-ui/plugins/minimal/text.ts @@ -13,6 +13,7 @@ export const text: PeritextPlugin['text'] = (props, inline) => { if (attrs[CommonSliceType.b]) style.fontWeight = 'bold'; if (attrs[CommonSliceType.i]) style.fontStyle = 'italic'; if (attrs[CommonSliceType.u]) textDecoration = 'underline'; + if (attrs[CommonSliceType.overline]) textDecoration = textDecoration ? textDecoration + ' overline' : 'overline'; if (attrs[CommonSliceType.s]) textDecoration = textDecoration ? textDecoration + ' line-through' : 'line-through'; if ((attr = attrs[CommonSliceType.col])) style.color = attr[0].slice.data() + ''; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx index e087ed218d..ef06a2cb03 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx @@ -51,6 +51,7 @@ export const TopToolbar: React.FC = ({ctx}) => { {inlineGroupButton(CommonSliceType.b, 'Bold')} {inlineGroupButton(CommonSliceType.i, 'Italic')} {inlineGroupButton(CommonSliceType.u, 'Underline')} + {inlineGroupButton(CommonSliceType.overline, 'Overline')} {inlineGroupButton(CommonSliceType.s, 'Strikethrough')} {inlineGroupButton(CommonSliceType.code, 'Code')} {inlineGroupButton(CommonSliceType.mark, 'Mark')} From 3dccf693d3fd33af6b91de90f46b37ca5549395c Mon Sep 17 00:00:00 2001 From: streamich Date: Fri, 14 Feb 2025 18:17:25 +0100 Subject: [PATCH 03/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20improve=20=20inline=20tag=20rendering?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../peritext/slice/constants.ts | 4 ++-- .../plugins/minimal/RenderInline/Spoiler.tsx | 24 +++++++++++++++++++ .../index.tsx} | 15 ++++++------ .../plugins/minimal/TopToolbar/index.tsx | 2 +- .../plugins/toolbar/RenderInline/Spoiler.tsx | 24 +++++++++++++++++++ .../index.tsx} | 8 +++---- .../plugins/toolbar/TopToolbar/index.tsx | 2 +- .../plugins/toolbar/state/index.tsx | 2 +- 8 files changed, 64 insertions(+), 17 deletions(-) create mode 100644 src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx rename src/json-crdt-peritext-ui/plugins/minimal/{RenderInline.tsx => RenderInline/index.tsx} (80%) create mode 100644 src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx rename src/json-crdt-peritext-ui/plugins/toolbar/{RenderInline.tsx => RenderInline/index.tsx} (77%) diff --git a/src/json-crdt-extensions/peritext/slice/constants.ts b/src/json-crdt-extensions/peritext/slice/constants.ts index 5c36f219f4..7c4068d7d4 100644 --- a/src/json-crdt-extensions/peritext/slice/constants.ts +++ b/src/json-crdt-extensions/peritext/slice/constants.ts @@ -61,7 +61,7 @@ export const enum SliceTypeCon { col = -17, // bg = -18, // kbd = -19, // - hidden = -20, // + spoiler = -20, // q = -21, // (inline quote) cite = -22, // (inline citation) footnote = -23, // or with href="#footnote-..." and title="Footnote ..." @@ -126,7 +126,7 @@ export enum SliceTypeName { col = SliceTypeCon.col, bg = SliceTypeCon.bg, kbd = SliceTypeCon.kbd, - hidden = SliceTypeCon.hidden, + spoiler = SliceTypeCon.spoiler, footnote = SliceTypeCon.footnote, ref = SliceTypeCon.ref, iaside = SliceTypeCon.iaside, diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx new file mode 100644 index 0000000000..7662e9a534 --- /dev/null +++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import {rule} from 'nano-theme'; + +const blockClass = rule({ + bg: '#222', + col: 'transparent', + bdrad: '2px', + '&:hover': { + bg: '#222', + col: 'rgba(255, 255, 255, 0.2)', + }, +}); + +export interface SpoilerProps { + children: React.ReactNode; +} + +export const Spoiler: React.FC = (props) => { + const {children} = props; + + return ( + {children} + ); +}; diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx similarity index 80% rename from src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx rename to src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx index 385ef6aea8..74c7451381 100644 --- a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline.tsx +++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx @@ -1,10 +1,10 @@ -// biome-ignore lint: React is used for JSX import * as React from 'react'; -import {usePeritext} from '../../react'; -import {useSyncStoreOpt} from '../../react/hooks'; -import {DefaultRendererColors} from './constants'; -import type {InlineViewProps} from '../../react/InlineView'; -import {CommonSliceType} from '../../../json-crdt-extensions'; +import {usePeritext} from '../../../react'; +import {useSyncStoreOpt} from '../../../react/hooks'; +import {DefaultRendererColors} from '../constants'; +import {CommonSliceType} from '../../../../json-crdt-extensions'; +import {Spoiler} from './Spoiler'; +import type {InlineViewProps} from '../../../react/InlineView'; interface RenderInlineSelectionProps extends RenderInlineProps { selection: [left: 'anchor' | 'focus' | '', right: 'anchor' | 'focus' | '']; @@ -44,8 +44,7 @@ export const RenderInline: React.FC = (props) => { if (attr[CommonSliceType.sub]) element = {element}; if (attr[CommonSliceType.math]) element = {element}; if (attr[CommonSliceType.kbd]) element = {element}; - if (attr[CommonSliceType.hidden]) - element = {element}; + if (attr[CommonSliceType.spoiler]) element = {element}; if (selection) { element = ( diff --git a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx index a846c0163f..07d00d3bbe 100644 --- a/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/minimal/TopToolbar/index.tsx @@ -61,7 +61,7 @@ export const TopToolbar: React.FC = ({ctx}) => { {inlineGroupButton(CommonSliceType.sub, 'Subscript')} {inlineGroupButton(CommonSliceType.math, 'Math')} {inlineGroupButton(CommonSliceType.kbd, 'Key')} - {inlineGroupButton(CommonSliceType.hidden, 'Spoiler')} + {inlineGroupButton(CommonSliceType.spoiler, 'Spoiler')} {inlineGroupButton(CommonSliceType.bookmark, 'Bookmark')} {button('Blue', () => { diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx new file mode 100644 index 0000000000..8280b84917 --- /dev/null +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import {rule} from 'nano-theme'; + +const blockClass = rule({ + bg: '#222', + col: 'transparent', + bdrad: 'calc(min(2px, 0.15em))', + '&:hover': { + col: 'inherit', + bg: 'rgba(0,0,0,.16)', + }, +}); + +export interface SpoilerProps { + children: React.ReactNode; +} + +export const Spoiler: React.FC = (props) => { + const {children} = props; + + return ( + {children} + ); +}; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx similarity index 77% rename from src/json-crdt-peritext-ui/plugins/toolbar/RenderInline.tsx rename to src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx index 68fb81813b..ae14c0192e 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx @@ -1,7 +1,8 @@ // biome-ignore lint: React is used for JSX import * as React from 'react'; -import {CommonSliceType} from '../../../json-crdt-extensions'; -import type {InlineViewProps} from '../../react/InlineView'; +import {CommonSliceType} from '../../../../json-crdt-extensions'; +import {Spoiler} from './Spoiler'; +import type {InlineViewProps} from '../../../react/InlineView'; export interface RenderInlineProps extends InlineViewProps { children: React.ReactNode; @@ -19,7 +20,6 @@ export const RenderInline: React.FC = (props) => { if (attr[CommonSliceType.sub]) element = {element}; if (attr[CommonSliceType.math]) element = {element}; if (attr[CommonSliceType.kbd]) element = {element}; - if (attr[CommonSliceType.hidden]) - element = {element}; + if (attr[CommonSliceType.spoiler]) element = {element}; return element; }; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx index ef06a2cb03..d810e95324 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx @@ -61,7 +61,7 @@ export const TopToolbar: React.FC = ({ctx}) => { {inlineGroupButton(CommonSliceType.sub, 'Subscript')} {inlineGroupButton(CommonSliceType.math, 'Math')} {inlineGroupButton(CommonSliceType.kbd, 'Key')} - {inlineGroupButton(CommonSliceType.hidden, 'Spoiler')} + {inlineGroupButton(CommonSliceType.spoiler, 'Spoiler')} {inlineGroupButton(CommonSliceType.bookmark, 'Bookmark')} {button('Blue', () => { diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx index 70da3959e5..50302817f6 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx @@ -143,7 +143,7 @@ export class ToolbarState implements UiLifeCyclesRender { name: 'Classified', icon: () => , onSelect: () => { - et.format(CommonSliceType.hidden); + et.format(CommonSliceType.spoiler); }, }, ], From f1edc1231823a411cb16d7f60bc8f9d86378124e Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 15 Feb 2025 09:49:37 +0100 Subject: [PATCH 04/14] =?UTF-8?q?feat(json-crdt-extensions):=20?= =?UTF-8?q?=F0=9F=8E=B8=20add=20methods=20for=20inline=20attributes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../peritext/block/Inline.ts | 61 +++++++++++++++---- .../peritext/block/index.ts | 2 +- 2 files changed, 49 insertions(+), 14 deletions(-) diff --git a/src/json-crdt-extensions/peritext/block/Inline.ts b/src/json-crdt-extensions/peritext/block/Inline.ts index 94b570bd86..d368951562 100644 --- a/src/json-crdt-extensions/peritext/block/Inline.ts +++ b/src/json-crdt-extensions/peritext/block/Inline.ts @@ -3,7 +3,6 @@ import {stringify} from '../../../json-text/stringify'; import {SliceBehavior, SliceTypeName} from '../slice/constants'; import {Range} from '../rga/Range'; import {ChunkSlice} from '../util/ChunkSlice'; -import {MarkerOverlayPoint} from '../overlay/MarkerOverlayPoint'; import {Cursor} from '../editor/Cursor'; import {hashId} from '../../../json-crdt/hash'; import {formatType} from '../slice/util'; @@ -15,34 +14,70 @@ import type {Peritext} from '../Peritext'; import type {Slice} from '../slice/types'; import type {PeritextMlAttributes, PeritextMlNode} from './types'; -/** The attribute started before this inline and ends after this inline. */ -export class InlineAttrPassing { +export abstract class AbstractInlineAttr { constructor(public slice: Slice) {} + + /** @returns Whether the attribute starts at the start of the inline. */ + isStart(): boolean { + return false; + } + + /** @returns Whether the attribute ends at the end of the inline. */ + isEnd(): boolean { + return false; + } + + /** @returns Whether the attribute is collapsed to a point. */ + isCollapsed(): boolean { + return false; + } } +/** The attribute started before this inline and ends after this inline. */ +export class InlineAttrPassing extends AbstractInlineAttr {} + /** The attribute starts at the beginning of this inline. */ -export class InlineAttrStart { - constructor(public slice: Slice) {} +export class InlineAttrStart extends AbstractInlineAttr { + isStart(): boolean { + return true; + } } /** The attribute ends at the end of this inline. */ -export class InlineAttrEnd { - constructor(public slice: Slice) {} +export class InlineAttrEnd extends AbstractInlineAttr { + isEnd(): boolean { + return true; + } } /** The attribute starts and ends in this inline, exactly contains it. */ -export class InlineAttrContained { - constructor(public slice: Slice) {} +export class InlineAttrContained extends AbstractInlineAttr { + isStart(): boolean { + return true; + } + isEnd(): boolean { + return true; + } } /** The attribute is collapsed at start of this inline. */ -export class InlineAttrStartPoint { - constructor(public slice: Slice) {} +export class InlineAttrStartPoint extends AbstractInlineAttr { + isStart(): boolean { + return true; + } + isCollapsed(): boolean { + return true; + } } /** The attribute is collapsed at end of this inline. */ -export class InlineAttrEndPoint { - constructor(public slice: Slice) {} +export class InlineAttrEndPoint extends AbstractInlineAttr { + isEnd(): boolean { + return true; + } + isCollapsed(): boolean { + return true; + } } export type InlineAttr = diff --git a/src/json-crdt-extensions/peritext/block/index.ts b/src/json-crdt-extensions/peritext/block/index.ts index 17f3552535..13792dfe57 100644 --- a/src/json-crdt-extensions/peritext/block/index.ts +++ b/src/json-crdt-extensions/peritext/block/index.ts @@ -1,3 +1,3 @@ export {Block, IBlock} from './Block'; export {LeafBlock} from './LeafBlock'; -export {Inline} from './Inline'; +export * from './Inline'; From 1f8609271ca867cd0adf5bad82a4de12f911ff8b Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 15 Feb 2025 09:51:07 +0100 Subject: [PATCH 05/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20use=20inline=20element=20positions=20to=20correc?= =?UTF-8?q?tly=20render=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/toolbar/RenderInline/Code.tsx | 37 +++++++++++++++++++ .../plugins/toolbar/RenderInline/index.tsx | 24 +++++++----- 2 files changed, 51 insertions(+), 10 deletions(-) create mode 100644 src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx new file mode 100644 index 0000000000..a9b4e66ce3 --- /dev/null +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import {rule, theme} from 'nano-theme'; +import {InlineAttr} from '../../../../json-crdt-extensions'; + +const blockClass = rule({ + ...theme.font.mono.mid, + fz: '.88em', + bg: '#eee', + pdt: '.05em', + pdb: '.05em', +}); + +const startClass = rule({ + borderTopLeftRadius: '.3em', + borderBottomLeftRadius: '.3em', + pdl: '.24em', +}); + +const endClass = rule({ + borderTopRightRadius: '.3em', + borderBottomRightRadius: '.3em', + pdr: '.24em', +}); + +export interface CodeProps { + attr: InlineAttr; + children: React.ReactNode; +} + +export const Code: React.FC = (props) => { + const {children, attr} = props; + const className = blockClass + (attr.isStart() ? startClass : '') + (attr.isEnd() ? endClass : ''); + + return ( + {children} + ); +}; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx index ae14c0192e..1fcd8592e3 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import {CommonSliceType} from '../../../../json-crdt-extensions'; import {Spoiler} from './Spoiler'; +import {Code} from './Code'; import type {InlineViewProps} from '../../../react/InlineView'; export interface RenderInlineProps extends InlineViewProps { @@ -10,16 +11,19 @@ export interface RenderInlineProps extends InlineViewProps { export const RenderInline: React.FC = (props) => { const {inline, children} = props; - const attr = inline.attr(); + const attrs = inline.attr(); let element = children; - if (attr[CommonSliceType.code]) element = {element}; - if (attr[CommonSliceType.mark]) element = {element}; - if (attr[CommonSliceType.del]) element = {element}; - if (attr[CommonSliceType.ins]) element = {element}; - if (attr[CommonSliceType.sup]) element = {element}; - if (attr[CommonSliceType.sub]) element = {element}; - if (attr[CommonSliceType.math]) element = {element}; - if (attr[CommonSliceType.kbd]) element = {element}; - if (attr[CommonSliceType.spoiler]) element = {element}; + if (attrs[CommonSliceType.code]) { + const attr = attrs[CommonSliceType.code][0]; + if (attr) element = {element}; + } + if (attrs[CommonSliceType.mark]) element = {element}; + if (attrs[CommonSliceType.del]) element = {element}; + if (attrs[CommonSliceType.ins]) element = {element}; + if (attrs[CommonSliceType.sup]) element = {element}; + if (attrs[CommonSliceType.sub]) element = {element}; + if (attrs[CommonSliceType.math]) element = {element}; + if (attrs[CommonSliceType.kbd]) element = {element}; + if (attrs[CommonSliceType.spoiler]) element = {element}; return element; }; From 109819875eaebd2e481c18c013e8d04fed8eca98 Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 15 Feb 2025 10:03:54 +0100 Subject: [PATCH 06/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20make=20inline=20=20background=20color=20dy?= =?UTF-8?q?namic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/toolbar/RenderInline/Code.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx index a9b4e66ce3..dad3240d9c 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx @@ -1,11 +1,10 @@ import * as React from 'react'; -import {rule, theme} from 'nano-theme'; +import {rule, drule, theme, useTheme} from 'nano-theme'; import {InlineAttr} from '../../../../json-crdt-extensions'; -const blockClass = rule({ +const blockClass = drule({ ...theme.font.mono.mid, - fz: '.88em', - bg: '#eee', + fz: '.9em', pdt: '.05em', pdb: '.05em', }); @@ -29,7 +28,13 @@ export interface CodeProps { export const Code: React.FC = (props) => { const {children, attr} = props; - const className = blockClass + (attr.isStart() ? startClass : '') + (attr.isEnd() ? endClass : ''); + const theme = useTheme(); + const className = + blockClass({ + bg: theme.g(.2, .1), + }) + + (attr.isStart() ? startClass : '') + + (attr.isEnd() ? endClass : ''); return ( {children} From 437b16a9bd27cec35aaddce5ef5e94b0f040d84c Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 15 Feb 2025 10:13:33 +0100 Subject: [PATCH 07/14] =?UTF-8?q?feat(json-crdt-extensions):=20?= =?UTF-8?q?=F0=9F=8E=B8=20add=20math=20block=20annotation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/json-crdt-extensions/peritext/slice/constants.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/json-crdt-extensions/peritext/slice/constants.ts b/src/json-crdt-extensions/peritext/slice/constants.ts index 7c4068d7d4..85461a8f87 100644 --- a/src/json-crdt-extensions/peritext/slice/constants.ts +++ b/src/json-crdt-extensions/peritext/slice/constants.ts @@ -40,6 +40,7 @@ export const enum SliceTypeCon { collapselist = 26, // Collapsible list - > List item collapse = 27, // Collapsible block note = 28, // Note block + mathblock = 29, // block // ------------------------------------------------ inline slices (-64 to -1) Cursor = -1, @@ -56,7 +57,7 @@ export const enum SliceTypeCon { ins = -12, // sup = -13, // sub = -14, // - math = -15, // + math = -15, // inline font = -16, // col = -17, // bg = -18, // @@ -106,6 +107,7 @@ export enum SliceTypeName { collapselist = SliceTypeCon.collapselist, collapse = SliceTypeCon.collapse, note = SliceTypeCon.note, + mathblock = SliceTypeCon.mathblock, Cursor = SliceTypeCon.Cursor, RemoteCursor = SliceTypeCon.RemoteCursor, From e8a5298e4bc900c83bc55e9106a66919d470f92c Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 15 Feb 2025 10:38:46 +0100 Subject: [PATCH 08/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20enable=20actions=20in=20floating=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/toolbar/state/index.tsx | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx index 50302817f6..2e24b1a8e4 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/state/index.tsx @@ -159,37 +159,51 @@ export class ToolbarState implements UiLifeCyclesRender { { name: 'Code', icon: () => , - onSelect: () => {}, + onSelect: () => { + et.format(CommonSliceType.code); + }, }, { name: 'Math', icon: () => , - onSelect: () => {}, + onSelect: () => { + et.format(CommonSliceType.math); + }, }, { name: 'Superscript', icon: () => , - onSelect: () => {}, + onSelect: () => { + et.format(CommonSliceType.sup); + }, }, { name: 'Subscript', icon: () => , - onSelect: () => {}, + onSelect: () => { + et.format(CommonSliceType.sub); + }, }, { name: 'Keyboard key', icon: () => , - onSelect: () => {}, + onSelect: () => { + et.format(CommonSliceType.kbd); + }, }, { name: 'Insertion', icon: () => , - onSelect: () => {}, + onSelect: () => { + et.format(CommonSliceType.ins); + }, }, { name: 'Deletion', icon: () => , - onSelect: () => {}, + onSelect: () => { + et.format(CommonSliceType.del); + }, }, ], }, From 97f9f3a5f1a755b75a2d9d51d734c2ead201042c Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 15 Feb 2025 23:31:07 +0100 Subject: [PATCH 09/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20render=20=20inline=20annotation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/toolbar/RenderInline/Kbd.tsx | 50 +++++++++++++++++++ .../plugins/toolbar/RenderInline/index.tsx | 14 ++++-- 2 files changed, 59 insertions(+), 5 deletions(-) create mode 100644 src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx new file mode 100644 index 0000000000..14b57f5b52 --- /dev/null +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import {rule, theme} from 'nano-theme'; +import {InlineAttr} from '../../../../json-crdt-extensions'; + +const blockClass = rule({ + ...theme.font.mono.mid, + mrt: '-.3em', + pdt: '.3em', + pdb: '.3em', + bg: theme.g(0.2), + bdt: `1px solid ${theme.g(0.3)}`, + bdb: `2px solid ${theme.g(0)}`, + lh: '1em', + fz: '.7em', + ws: 'nowrap', + bxsh: '0 0 .125em rgba(0,0,0,.5),0 .065em .19em rgba(0,0,0,.5),.065em 0 .125em rgba(0,0,0,.2)', + col: '#fff', +}); + +const startClass = rule({ + pdl: '.7em', + borderTopLeftRadius: '.3em', + borderBottomLeftRadius: '.3em', +}); + +const endClass = rule({ + pdr: 'calc(.7em - 2px)', + borderTopRightRadius: '.3em', + borderBottomRightRadius: '.3em', + bdr: `2px solid ${theme.g(0.1)}`, +}); + +export interface KbdProps { + attr: InlineAttr; + children: React.ReactNode; +} + +export const Kbd: React.FC = (props) => { + const {attr, children} = props; + const className = + blockClass + + (attr.isStart() ? startClass : '') + + (attr.isEnd() ? endClass : ''); + + return ( + + {children} + + ); +}; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx index 1fcd8592e3..ebdefb4751 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import {CommonSliceType} from '../../../../json-crdt-extensions'; import {Spoiler} from './Spoiler'; import {Code} from './Code'; +import {Kbd} from './Kbd'; import type {InlineViewProps} from '../../../react/InlineView'; export interface RenderInlineProps extends InlineViewProps { @@ -13,17 +14,20 @@ export const RenderInline: React.FC = (props) => { const {inline, children} = props; const attrs = inline.attr(); let element = children; - if (attrs[CommonSliceType.code]) { - const attr = attrs[CommonSliceType.code][0]; - if (attr) element = {element}; - } if (attrs[CommonSliceType.mark]) element = {element}; if (attrs[CommonSliceType.del]) element = {element}; if (attrs[CommonSliceType.ins]) element = {element}; if (attrs[CommonSliceType.sup]) element = {element}; if (attrs[CommonSliceType.sub]) element = {element}; if (attrs[CommonSliceType.math]) element = {element}; - if (attrs[CommonSliceType.kbd]) element = {element}; + if (attrs[CommonSliceType.code]) { + const attr = attrs[CommonSliceType.code][0]; + if (attr) element = {element}; + } + if (attrs[CommonSliceType.kbd]) { + const attr = attrs[CommonSliceType.kbd][0]; + if (attr) element = {element}; + } if (attrs[CommonSliceType.spoiler]) element = {element}; return element; }; From b9a2154959dd3c92790bee70de69c93135e600dd Mon Sep 17 00:00:00 2001 From: streamich Date: Sat, 15 Feb 2025 23:31:35 +0100 Subject: [PATCH 10/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20improve=20caret=20visibility=20on=20dark=20backg?= =?UTF-8?q?round?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx index 398c48280f..45fc2bb78b 100644 --- a/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx +++ b/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx @@ -44,6 +44,10 @@ const innerClass = rule({ an: moveAnimation + ' .25s ease-out forwards', }); +const innerClass2 = rule({ + 'mix-blend-mode': 'hard-light', +}); + export interface RenderCaretProps extends CaretViewProps { children: React.ReactNode; } @@ -84,6 +88,9 @@ export const RenderCaret: React.FC = ({italic, children}) => { }} /> )} + + {/* Two carets overlay, so that they look good, both, on white and black backgrounds. */} + ); From bf0388beb9067fc869d4e3161c8ad42a8a54659f Mon Sep 17 00:00:00 2001 From: streamich Date: Sun, 16 Feb 2025 00:13:16 +0100 Subject: [PATCH 11/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20improve=20styling=20of=20=20formatting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/toolbar/RenderInline/Ins.tsx | 22 +++++++++++++++++++ .../plugins/toolbar/RenderInline/index.tsx | 3 ++- 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx new file mode 100644 index 0000000000..deeb57bf28 --- /dev/null +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import {rule} from 'nano-theme'; + +const blockClass = rule({ + bg: '#dafbe1', + bxsh: '0 2px 0 0 #aceebb', + td: 'none', +}); + +export interface InsProps { + children: React.ReactNode; +} + +export const Ins: React.FC = (props) => { + const {children} = props; + + return ( + + {children} + + ); +}; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx index ebdefb4751..5434ec977d 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx @@ -4,6 +4,7 @@ import {CommonSliceType} from '../../../../json-crdt-extensions'; import {Spoiler} from './Spoiler'; import {Code} from './Code'; import {Kbd} from './Kbd'; +import {Ins} from './Ins'; import type {InlineViewProps} from '../../../react/InlineView'; export interface RenderInlineProps extends InlineViewProps { @@ -16,10 +17,10 @@ export const RenderInline: React.FC = (props) => { let element = children; if (attrs[CommonSliceType.mark]) element = {element}; if (attrs[CommonSliceType.del]) element = {element}; - if (attrs[CommonSliceType.ins]) element = {element}; if (attrs[CommonSliceType.sup]) element = {element}; if (attrs[CommonSliceType.sub]) element = {element}; if (attrs[CommonSliceType.math]) element = {element}; + if (attrs[CommonSliceType.ins]) element = {element}; if (attrs[CommonSliceType.code]) { const attr = attrs[CommonSliceType.code][0]; if (attr) element = {element}; From 973ec8ee538d9e6be993498738049c655662218d Mon Sep 17 00:00:00 2001 From: streamich Date: Sun, 16 Feb 2025 00:24:54 +0100 Subject: [PATCH 12/14] =?UTF-8?q?feat(json-crdt-peritext-ui):=20?= =?UTF-8?q?=F0=9F=8E=B8=20improve=20=20inline=20formatting=20styling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/toolbar/RenderInline/Del.tsx | 22 +++++++++++++++++++ .../plugins/toolbar/RenderInline/index.tsx | 3 ++- 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx new file mode 100644 index 0000000000..464277667f --- /dev/null +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import {rule} from 'nano-theme'; + +const delClass = rule({ + bg: '#ffebe9', + bxsh: '0 2px 0 0 #ffcecb', + col: 'red', +}); + +export interface DelProps { + children: React.ReactNode; +} + +export const Del: React.FC = (props) => { + const {children} = props; + + return ( + + {children} + + ); +}; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx index 5434ec977d..d9581e23fd 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/index.tsx @@ -5,6 +5,7 @@ import {Spoiler} from './Spoiler'; import {Code} from './Code'; import {Kbd} from './Kbd'; import {Ins} from './Ins'; +import {Del} from './Del'; import type {InlineViewProps} from '../../../react/InlineView'; export interface RenderInlineProps extends InlineViewProps { @@ -16,11 +17,11 @@ export const RenderInline: React.FC = (props) => { const attrs = inline.attr(); let element = children; if (attrs[CommonSliceType.mark]) element = {element}; - if (attrs[CommonSliceType.del]) element = {element}; if (attrs[CommonSliceType.sup]) element = {element}; if (attrs[CommonSliceType.sub]) element = {element}; if (attrs[CommonSliceType.math]) element = {element}; if (attrs[CommonSliceType.ins]) element = {element}; + if (attrs[CommonSliceType.del]) element = {element}; if (attrs[CommonSliceType.code]) { const attr = attrs[CommonSliceType.code][0]; if (attr) element = {element}; From 0bc3683ffbf6c3921054a4232718bcc8fd5a3185 Mon Sep 17 00:00:00 2001 From: streamich Date: Sun, 16 Feb 2025 00:26:55 +0100 Subject: [PATCH 13/14] =?UTF-8?q?style:=20=F0=9F=92=84=20fix=20linter=20is?= =?UTF-8?q?sues?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/cursor/RenderCaret.tsx | 2 +- .../plugins/minimal/RenderInline/Spoiler.tsx | 6 ++---- .../plugins/minimal/RenderInline/index.tsx | 2 +- .../plugins/toolbar/RenderInline/Code.tsx | 10 ++++------ .../plugins/toolbar/RenderInline/Del.tsx | 8 ++------ .../plugins/toolbar/RenderInline/Ins.tsx | 8 ++------ .../plugins/toolbar/RenderInline/Kbd.tsx | 15 ++++----------- .../plugins/toolbar/RenderInline/Spoiler.tsx | 6 ++---- 8 files changed, 18 insertions(+), 39 deletions(-) diff --git a/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx b/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx index 45fc2bb78b..4d53fb5bce 100644 --- a/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx +++ b/src/json-crdt-peritext-ui/plugins/cursor/RenderCaret.tsx @@ -88,7 +88,7 @@ export const RenderCaret: React.FC = ({italic, children}) => { }} /> )} - + {/* Two carets overlay, so that they look good, both, on white and black backgrounds. */} diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx index 7662e9a534..02058c7cfe 100644 --- a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx +++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type * as React from 'react'; import {rule} from 'nano-theme'; const blockClass = rule({ @@ -18,7 +18,5 @@ export interface SpoilerProps { export const Spoiler: React.FC = (props) => { const {children} = props; - return ( - {children} - ); + return {children}; }; diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx index 74c7451381..5a4d19f20c 100644 --- a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type * as React from 'react'; import {usePeritext} from '../../../react'; import {useSyncStoreOpt} from '../../../react/hooks'; import {DefaultRendererColors} from '../constants'; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx index dad3240d9c..8e25d38b82 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; +import type * as React from 'react'; import {rule, drule, theme, useTheme} from 'nano-theme'; -import {InlineAttr} from '../../../../json-crdt-extensions'; +import type {InlineAttr} from '../../../../json-crdt-extensions'; const blockClass = drule({ ...theme.font.mono.mid, @@ -31,12 +31,10 @@ export const Code: React.FC = (props) => { const theme = useTheme(); const className = blockClass({ - bg: theme.g(.2, .1), + bg: theme.g(0.2, 0.1), }) + (attr.isStart() ? startClass : '') + (attr.isEnd() ? endClass : ''); - return ( - {children} - ); + return {children}; }; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx index 464277667f..49b227466a 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type * as React from 'react'; import {rule} from 'nano-theme'; const delClass = rule({ @@ -14,9 +14,5 @@ export interface DelProps { export const Del: React.FC = (props) => { const {children} = props; - return ( - - {children} - - ); + return {children}; }; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx index deeb57bf28..36e0793f83 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type * as React from 'react'; import {rule} from 'nano-theme'; const blockClass = rule({ @@ -14,9 +14,5 @@ export interface InsProps { export const Ins: React.FC = (props) => { const {children} = props; - return ( - - {children} - - ); + return {children}; }; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx index 14b57f5b52..1a7a5be99b 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; +import type * as React from 'react'; import {rule, theme} from 'nano-theme'; -import {InlineAttr} from '../../../../json-crdt-extensions'; +import type {InlineAttr} from '../../../../json-crdt-extensions'; const blockClass = rule({ ...theme.font.mono.mid, @@ -37,14 +37,7 @@ export interface KbdProps { export const Kbd: React.FC = (props) => { const {attr, children} = props; - const className = - blockClass + - (attr.isStart() ? startClass : '') + - (attr.isEnd() ? endClass : ''); + const className = blockClass + (attr.isStart() ? startClass : '') + (attr.isEnd() ? endClass : ''); - return ( - - {children} - - ); + return {children}; }; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx index 8280b84917..864d435167 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx @@ -1,4 +1,4 @@ -import * as React from 'react'; +import type * as React from 'react'; import {rule} from 'nano-theme'; const blockClass = rule({ @@ -18,7 +18,5 @@ export interface SpoilerProps { export const Spoiler: React.FC = (props) => { const {children} = props; - return ( - {children} - ); + return {children}; }; From 853ec066e8fd882841f7484c0a6208330b4a94e3 Mon Sep 17 00:00:00 2001 From: streamich Date: Sun, 16 Feb 2025 00:30:20 +0100 Subject: [PATCH 14/14] =?UTF-8?q?style:=20=F0=9F=92=84=20fix=20React=20imp?= =?UTF-8?q?orts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugins/minimal/RenderInline/Spoiler.tsx | 3 ++- .../plugins/minimal/RenderInline/index.tsx | 3 ++- .../plugins/toolbar/RenderInline/Code.tsx | 3 ++- src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx | 3 ++- src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx | 3 ++- src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx | 3 ++- .../plugins/toolbar/RenderInline/Spoiler.tsx | 3 ++- 7 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx index 02058c7cfe..2ee96aebfc 100644 --- a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx +++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/Spoiler.tsx @@ -1,4 +1,5 @@ -import type * as React from 'react'; +// biome-ignore lint: React is used for JSX +import * as React from 'react'; import {rule} from 'nano-theme'; const blockClass = rule({ diff --git a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx index 5a4d19f20c..60e71de90e 100644 --- a/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx +++ b/src/json-crdt-peritext-ui/plugins/minimal/RenderInline/index.tsx @@ -1,4 +1,5 @@ -import type * as React from 'react'; +// biome-ignore lint: React is used for JSX +import * as React from 'react'; import {usePeritext} from '../../../react'; import {useSyncStoreOpt} from '../../../react/hooks'; import {DefaultRendererColors} from '../constants'; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx index 8e25d38b82..cc523de898 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Code.tsx @@ -1,4 +1,5 @@ -import type * as React from 'react'; +// biome-ignore lint: React is used for JSX +import * as React from 'react'; import {rule, drule, theme, useTheme} from 'nano-theme'; import type {InlineAttr} from '../../../../json-crdt-extensions'; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx index 49b227466a..0d715b67ae 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Del.tsx @@ -1,4 +1,5 @@ -import type * as React from 'react'; +// biome-ignore lint: React is used for JSX +import * as React from 'react'; import {rule} from 'nano-theme'; const delClass = rule({ diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx index 36e0793f83..a63ec6e151 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Ins.tsx @@ -1,4 +1,5 @@ -import type * as React from 'react'; +// biome-ignore lint: React is used for JSX +import * as React from 'react'; import {rule} from 'nano-theme'; const blockClass = rule({ diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx index 1a7a5be99b..06a611ae78 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Kbd.tsx @@ -1,4 +1,5 @@ -import type * as React from 'react'; +// biome-ignore lint: React is used for JSX +import * as React from 'react'; import {rule, theme} from 'nano-theme'; import type {InlineAttr} from '../../../../json-crdt-extensions'; diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx index 864d435167..735bef250a 100644 --- a/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx +++ b/src/json-crdt-peritext-ui/plugins/toolbar/RenderInline/Spoiler.tsx @@ -1,4 +1,5 @@ -import type * as React from 'react'; +// biome-ignore lint: React is used for JSX +import * as React from 'react'; import {rule} from 'nano-theme'; const blockClass = rule({