Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support toggle heading #6712

Merged
merged 2 commits into from
Nov 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
const blockType = block.get(YjsEditorKey.block_type) as BlockType;

if (blockType !== BlockType.Paragraph) {
handleNonParagraphBlockBackspaceAndEnterWithTxn(sharedRoot, block);
handleNonParagraphBlockBackspaceAndEnterWithTxn(editor, sharedRoot, block, point);

Check warning on line 152 in frontend/appflowy_web_app/src/application/slate-yjs/command/index.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/command/index.ts#L152

Added line #L152 was not covered by tests
return;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@

console.log('beforeAttributes', relativeOffset, beforeAttributes);

if (beforeAttributes && ('formula' in beforeAttributes || 'mention' in beforeAttributes)) {
if (beforeAttributes && ('formula' in beforeAttributes || 'mention' in beforeAttributes || 'href' in beforeAttributes)) {
const newAttributes = {
...attributes,
};
Expand All @@ -89,6 +89,12 @@
});
}

if ('href' in beforeAttributes) {
Object.assign({
href: null,
});

Check warning on line 95 in frontend/appflowy_web_app/src/application/slate-yjs/utils/applyToYjs.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/applyToYjs.ts#L93-L95

Added lines #L93 - L95 were not covered by tests
}

Check warning on line 97 in frontend/appflowy_web_app/src/application/slate-yjs/utils/applyToYjs.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/applyToYjs.ts#L97

Added line #L97 was not covered by tests
yText.insert(relativeOffset, text, newAttributes);
} else {
yText.insert(relativeOffset, text, attributes);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@
import { nanoid } from 'nanoid';
import Delta, { Op } from 'quill-delta';
import {
BasePoint,
BaseRange,
Descendant,
Text,
Editor,
Element,
Node,
NodeEntry,
Path,
Point,
Range,
Text,
Transforms,
BasePoint,
} from 'slate';
import { ReactEditor } from 'slate-react';
import * as Y from 'yjs';
Expand Down Expand Up @@ -180,13 +180,13 @@
const yText = getText(block.get(YjsEditorKey.block_external_id), sharedRoot);

if (yText.length === 0) {
const point = Editor.start(editor, at);

Check warning on line 184 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L184

Added line #L184 was not covered by tests
if (blockType !== BlockType.Paragraph) {
handleNonParagraphBlockBackspaceAndEnterWithTxn(sharedRoot, block);
handleNonParagraphBlockBackspaceAndEnterWithTxn(editor, sharedRoot, block, point);
return;
}

const point = Editor.start(editor, at);

if (path.length > 1 && handleLiftBlockOnBackspaceAndEnterWithTxn(editor, sharedRoot, block, point)) {
return;
}
Expand Down Expand Up @@ -293,6 +293,46 @@

// delete source block
deleteBlock(sharedRoot, sourceBlock.get(YjsEditorKey.block_id));

// turn to toggle heading

Check warning on line 297 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L296-L297

Added lines #L296 - L297 were not covered by tests
if (type === BlockType.ToggleListBlock && (data as unknown as ToggleListBlockData).level) {
const nextSiblings = getNextSiblings(sharedRoot, newBlock);

if (!nextSiblings || nextSiblings.length === 0) return;
// find the next sibling with the same or higher level

Check warning on line 302 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L300-L302

Added lines #L300 - L302 were not covered by tests
const index = nextSiblings.findIndex((id) => {
const block = getBlock(id, sharedRoot);

Check warning on line 304 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L304

Added line #L304 was not covered by tests
const blockData = dataStringTOJson(block.get(YjsEditorKey.block_data));

Check warning on line 306 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L306

Added line #L306 was not covered by tests
if ('level' in blockData && (blockData as {
level: number
}).level <= ((data as unknown as ToggleListBlockData).level as number)) {

Check warning on line 309 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L308-L309

Added lines #L308 - L309 were not covered by tests
return true;
}

return false;
});

const nodes = index > -1 ? nextSiblings.slice(0, index) : nextSiblings;

// if not found, return. Otherwise, indent the block
nodes.forEach((id) => {

Check warning on line 319 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L312-L319

Added lines #L312 - L319 were not covered by tests
const block = getBlock(id, sharedRoot);

Check warning on line 321 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L321

Added line #L321 was not covered by tests
indentBlock(sharedRoot, block);
});
}
}

function getNextSiblings (sharedRoot: YSharedRoot, block: YBlock) {
const parent = getBlock(block.get(YjsEditorKey.block_parent), sharedRoot);

Check warning on line 329 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L327-L329

Added lines #L327 - L329 were not covered by tests
if (!parent) return;

Check warning on line 331 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L331

Added line #L331 was not covered by tests
const parentChildren = getChildrenArray(parent.get(YjsEditorKey.block_children), sharedRoot);
const index = parentChildren.toArray().findIndex((id) => id === block.get(YjsEditorKey.block_id));

Check warning on line 334 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L334

Added line #L334 was not covered by tests
return parentChildren.toArray().slice(index + 1);
}

function getSplitBlockOperations (sharedRoot: YSharedRoot, block: YBlock, offset: number): {
Expand Down Expand Up @@ -822,10 +862,26 @@
return blockEntry as NodeEntry<Element>;
}

export function handleNonParagraphBlockBackspaceAndEnterWithTxn (sharedRoot: YSharedRoot, block: YBlock) {
export function handleNonParagraphBlockBackspaceAndEnterWithTxn (editor: YjsEditor, sharedRoot: YSharedRoot, block: YBlock, point: BasePoint) {

Check warning on line 865 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L865

Added line #L865 was not covered by tests
const data = dataStringTOJson(block.get(YjsEditorKey.block_data));
const blockType = block.get(YjsEditorKey.block_type);

if (blockType === BlockType.ToggleListBlock && (data as ToggleListBlockData).level) {

Check warning on line 869 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L867-L869

Added lines #L867 - L869 were not covered by tests
const [, path] = getBlockEntry(editor, point);

Check warning on line 871 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L871

Added line #L871 was not covered by tests
Transforms.setNodes(editor, {
data: {

Check warning on line 873 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L873

Added line #L873 was not covered by tests
...data,
level: null,
},
}, { at: path });
return;
}

Check warning on line 880 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L875-L880

Added lines #L875 - L880 were not covered by tests
const operations: (() => void)[] = [];

operations.push(() => {

Check warning on line 884 in frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts

View check run for this annotation

Codecov / codecov/patch

frontend/appflowy_web_app/src/application/slate-yjs/utils/yjsOperations.ts#L884

Added line #L884 was not covered by tests
turnToBlock(sharedRoot, block, BlockType.Paragraph, {});
});
executeOperations(sharedRoot, operations, 'turnToBlock');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe('Markdown editing', () => {
cy.get('@editor').type('##');
cy.get('@editor').realPress('Space');
cy.wait(50);

cy.get('@editor').type('Heading 2');
expectedJson = [...expectedJson, {
type: 'heading',
Expand Down Expand Up @@ -436,11 +436,152 @@ describe('Markdown editing', () => {
},
];
assertJSON(expectedJson);

// Test 7: Toggle heading
cy.get('@editor').realPress('Enter');
cy.get('@editor').type('>');
cy.get('@editor').realPress('Space');
cy.get('@editor').type('toggle heading');
cy.get('@editor').realPress('Enter');
cy.get('@editor').type('toggle heading child');
cy.get('@editor').realPress('Enter');
cy.get('@editor').realPress(['Shift', 'Tab']);
cy.get('@editor').type('toggle heading sibling');
cy.get('@editor').realPress('Enter');
cy.get('@editor').type('###');
cy.get('@editor').realPress('Space');
cy.get('@editor').type('heading 3');
cy.get('@editor').selectMultipleText(['toggle heading']);
cy.wait(500);
cy.get('@editor').realPress(['ArrowLeft']);
cy.get('@editor').type('#');
cy.get('@editor').realPress('Space');
const extraData: FromBlockJSON[] = [{
type: 'toggle_list',
data: {
level: 1,
collapsed: false,
},
text: [{
insert: 'toggle heading',
}],
children: [{
type: 'paragraph',
data: {},
text: [{
insert: 'toggle heading child',
}],
children: [],
}],
},
{
type: 'paragraph',
data: {},
text: [{
insert: 'toggle heading sibling',
}],
children: [],
},
{
type: 'heading',
data: {
level: 3,
},
text: [{
insert: 'heading 3',
}],
children: [],

}];

assertJSON([
...expectedJson,
...extraData,
]);
cy.get('@editor').realPress('Backspace');
assertJSON([
...expectedJson,
{
...extraData[0],
data: {
collapsed: false,
level: null,
},
},
extraData[1],
extraData[2],
] as FromBlockJSON[]);
cy.get('@editor').realPress('Backspace');
assertJSON([
...expectedJson,
{
...extraData[0],
type: 'paragraph',
data: {},
},
extraData[1],
extraData[2],
] as FromBlockJSON[]);
cy.get('@editor').type('#');
cy.get('@editor').realPress('Space');
cy.get('@editor').type('>');
cy.get('@editor').realPress('Space');
expectedJson = [
...expectedJson,
{
...extraData[0],
children: [
extraData[0].children[0],
extraData[1],
extraData[2],
],
},
] as FromBlockJSON[];

assertJSON(expectedJson);

cy.selectMultipleText(['heading 3']);
cy.wait(500);
cy.get('@editor').realPress('ArrowRight');
cy.get('@editor').realPress('Enter');
cy.get('@editor').realPress(['Shift', 'Tab']);

// Test 8: Link
cy.get('@editor').type('Link: [Click here](https://example.com');
cy.get('@editor').realPress(')');
assertJSON([
...expectedJson,
{
type: 'paragraph',
data: {},
text: [{ insert: 'Link: ' }, {
insert: 'Click here',
attributes: { href: 'https://example.com' },
}],
children: [],
},
]);
cy.get('@editor').type('link anchor');
expectedJson = [
...expectedJson,
{
type: 'paragraph',
data: {},
text: [{ insert: 'Link: ' }, {
insert: 'Click here',
attributes: { href: 'https://example.com' },
}, { insert: 'link anchor' }],
children: [],
},
];
assertJSON(expectedJson);
cy.get('@editor').realPress('Enter');
//
// Last test: Divider
cy.get('@editor').type('--');
cy.get('@editor').realPress('-');
expectedJson = [
...expectedJson.slice(0, -1),
...expectedJson,
{
type: 'divider',
data: {},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function ToggleIcon ({ block, className }: { block: ToggleListNode; className: s
onMouseDown={(e) => {
e.preventDefault();
}}
className={`${className} ${readOnly ? '' : 'cursor-pointer hover:text-fill-default'} pr-1 text-xl`}
className={`${className} ${readOnly ? '' : 'cursor-pointer hover:text-fill-default'} pr-1 text-xl h-full`}
>
{collapsed ? <ExpandSvg className={'-rotate-90 transform'} /> : <ExpandSvg />}
</span>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,35 @@
import { getHeadingCssProperty } from '@/components/editor/components/blocks/heading';
import React, { forwardRef, memo, useMemo } from 'react';
import { EditorElementProps, ToggleListNode } from '@/components/editor/editor.type';

export const ToggleList = memo(
forwardRef<HTMLDivElement, EditorElementProps<ToggleListNode>>(({ node, children, ...attributes }, ref) => {
const { collapsed, level } = useMemo(() => node.data || {}, [node.data]);
const fontSizeCssProperty = getHeadingCssProperty(level || 0);
const className = `${attributes.className ?? ''} flex w-full flex-col ${collapsed ? 'collapsed' : ''} ${fontSizeCssProperty} level-${level}`;
const { collapsed, level = 0 } = useMemo(() => node.data || {}, [node.data]);
const className = useMemo(() => {

const classList = ['flex w-full flex-col'];

if (attributes.className) {
classList.push(attributes.className);
}

if (collapsed) {
classList.push('collapsed');
}

if (level) {
classList.push(`toggle-heading level-${level}`);
}

return classList.join(' ');

}, [collapsed, level, attributes.className]);

return (
<>
<div {...attributes} ref={ref}
className={className}
<div
{...attributes}
ref={ref}
className={className}
>
{children}
</div>
Expand Down
Loading
Loading