tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: revises left indent

Browse Source
This commit is contained in:
James
2022-12-22 18:26:09 -05:00
parent 4516c3670e
commit 801068c8fe
7 changed files with 128 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/admin/components/forms/field-types/RichText/RichText.tsx
View File

@@ -4,6 +4,7 @@ import { createEditor, Transforms, Node, Element as SlateElement, Text, BaseEdit
import { ReactEditor, Editable, withReact, Slate } from 'slate-react';
import { HistoryEditor, withHistory } from 'slate-history';
import { useTranslation } from 'react-i18next';
import e from 'express';
import { richText } from '../../../../../fields/validations';
import useField from '../../useField';
import withCondition from '../../withCondition';
@@ -347,9 +348,11 @@ const RichText: React.FC<Props> = (props) => {
if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
event.preventDefault();
Transforms.unwrapNodes(editor, {
match: (n) => SlateElement.isElement(n) && listTypes.includes(n.type),
split: true,
mode: 'lowest',
});
Transforms.setNodes(editor, { type: undefined });

2
src/admin/components/forms/field-types/RichText/elements/ListButton.tsx
View File

@@ -2,9 +2,9 @@ import React, { useCallback } from 'react';
import { useSlate } from 'slate-react';
import toggleList from './toggleList';
import { ButtonProps } from './types';
import isListActive from './isListActive';
import '../buttons.scss';
import isListActive from './isListActive';
export const baseClass = 'rich-text__button';

6
src/admin/components/forms/field-types/RichText/elements/getCommonBlock.tsx
View File

@@ -1,6 +1,6 @@
import { Editor, Node, NodeEntry } from 'slate';
import { Editor, Node, NodeEntry, NodeMatch } from 'slate';
export const getCommonBlock = (editor: Editor): NodeEntry<Node> => {
export const getCommonBlock = (editor: Editor, match?: NodeMatch<Node>): NodeEntry<Node> => {
const range = Editor.unhangRange(editor, editor.selection, { voids: true });
const [common, path] = Node.common(
@@ -14,6 +14,6 @@ export const getCommonBlock = (editor: Editor): NodeEntry<Node> => {
}
return Editor.above(editor, {
at: path,
match: (n) => Editor.isBlock(editor, n) || Editor.isEditor(n),
match: match || ((n) => Editor.isBlock(editor, n) || Editor.isEditor(n)),
});
};

81
src/admin/components/forms/field-types/RichText/elements/indent/index.tsx
View File

@@ -5,6 +5,9 @@ import IndentLeft from '../../../../../icons/IndentLeft';
import IndentRight from '../../../../../icons/IndentRight';
import { baseClass } from '../Button';
import isElementActive from '../isActive';
import listTypes from '../listTypes';
import { getCommonBlock } from '../getCommonBlock';
import Edit from '../../../../../icons/Edit';
const indentType = 'indent';
@@ -24,30 +27,67 @@ const indent = {
e.preventDefault();
if (dir === 'left') {
// Transforms.unwrapNodes(editor, {
// match: (n) => Element.isElement(n) && [indentType, ...listTypes].includes(n.type),
// split: true,
// mode: 'lowest',
// });
if (isElementActive(editor, 'li')) {
const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && listTypes.includes(n.type));
// if (isElementActive(editor, 'li')) {
// const [, parentLocation] = Editor.parent(editor, editor.selection);
// const [, parentDepth] = parentLocation;
const matchedParentList = Editor.above(editor, {
at: listPath,
match: (n) => !Editor.isEditor(n) && Editor.isBlock(editor, n),
});
// if (parentDepth > 0 || parentDepth === 0) {
// Transforms.unwrapNodes(editor, {
// match: (n) => Element.isElement(n) && n.type === 'li',
// split: true,
// mode: 'lowest',
// });
// } else {
// Transforms.unsetNodes(editor, ['type']);
// }
// }
if (matchedParentList) {
const [parentListItem, parentListItemPath] = matchedParentList;
const [previousNode, previousNodePath] = Editor.parent(editor, editor.selection, { depth: 4 });
if (parentListItem.children.length > 1) {
console.log('we have more than one child');
} else {
Transforms.unwrapNodes(editor, {
at: parentListItemPath,
match: (node, path) => {
return Element.isElement(node)
&& node.type === 'li'
&& path.length === parentListItemPath.length;
},
});
console.log({ previousNode, previousNodePath });
Transforms.unwrapNodes(editor, {
match: (n) => Element.isElement(n) && listTypes.includes(n.type),
});
}
} else {
// Remove type for any nodes that have more than one child
Transforms.setNodes(editor, { type: undefined }, {
at: listPath,
match: (node, path) => {
const matches = !Editor.isEditor(node)
&& Element.isElement(node)
&& node.children.length === 1
&& node.type === 'li'
&& path.length === listPath.length + 1;
return matches;
},
});
// For nodes that have more than one child, unwrap it instead
Transforms.unwrapNodes(editor, {
at: listPath,
match: (node, path) => {
const matches = !Editor.isEditor(node)
&& Element.isElement(node)
&& node.children.length > 1
&& node.type === 'li'
&& path.length === listPath.length + 1;
return matches;
},
});
Transforms.unwrapNodes(editor, {
match: (n) => Element.isElement(n) && listTypes.includes(n.type),
});
}
}
}
if (dir === 'right') {
@@ -100,6 +140,7 @@ const indent = {
},
);
} else {
// Otherwise, just wrap the node in a list / li
Transforms.wrapNodes(
editor,
{

2
src/admin/components/forms/field-types/RichText/elements/isListActive.ts
View File

@@ -12,7 +12,7 @@ const isListActive = (editor: Editor, format: string): boolean => {
return !Editor.isEditor(node)
&& Element.isElement(node)
&& node.type === format
&& path.length >= topmostSelectedNodePath.length - 1;
&& path.length >= topmostSelectedNodePath.length - 2;
},
}));

62
src/admin/components/forms/field-types/RichText/elements/toggleList.tsx
View File

@@ -1,5 +1,6 @@
import { Editor, Element, Transforms } from 'slate';
import { Editor, Element, Node, Text, Transforms } from 'slate';
import { ReactEditor } from 'slate-react';
import { getCommonBlock } from './getCommonBlock';
import isListActive from './isListActive';
import listTypes from './listTypes';
@@ -10,18 +11,63 @@ const toggleList = (editor: Editor, format: string): void => {
if (isListActive(editor, 'ul')) currentListFormat = 'ul';
// If the format is currently active,
// unwrap the list and set li type to undefined
// remove the list
if (currentListFormat === format) {
Transforms.unwrapNodes(editor, {
match: (n) => Element.isElement(n) && listTypes.includes(n.type),
mode: 'lowest',
});
const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
Transforms.setNodes(editor, { type: undefined });
// If on an empty bullet, leave the above list alone
// and unwrap only the active bullet
if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
Transforms.unwrapNodes(editor, {
match: (n) => Element.isElement(n) && listTypes.includes(n.type),
split: true,
mode: 'lowest',
});
Transforms.setNodes(editor, { type: undefined });
} else {
// Otherwise, we need to unset li on all lis in the parent list
// and unwrap the parent list itself
const [, listPath] = getCommonBlock(editor, (n) => Element.isElement(n) && n.type === format);
// Remove type for any nodes that have more than one child
Transforms.setNodes(editor, { type: undefined }, {
at: listPath,
match: (node, path) => {
const matches = !Editor.isEditor(node)
&& Element.isElement(node)
&& node.children.length === 1
&& node.type === 'li'
&& path.length === listPath.length + 1;
return matches;
},
});
// For nodes that have more than one child, unwrap it instead
Transforms.unwrapNodes(editor, {
at: listPath,
match: (node, path) => {
const matches = !Editor.isEditor(node)
&& Element.isElement(node)
&& node.children.length > 1
&& node.type === 'li'
&& path.length === listPath.length + 1;
return matches;
},
});
// Finally, unwrap the UL itself
Transforms.unwrapNodes(editor, {
match: (n) => Element.isElement(n) && n.type === format,
mode: 'lowest',
});
}
// Otherwise, if a list is active and we are changing it,
// change it
} else if (currentListFormat !== format) {
} else if (currentListFormat && currentListFormat !== format) {
Transforms.setNodes(
editor,
{

6
test/fields/collections/RichText/index.ts
View File

@@ -334,7 +334,11 @@ export const richTextBulletsDoc = {
type: 'li',
children: [
{
text: 'This text precedes a nested list',
children: [
{
text: 'This text precedes a nested list',
},
],
},
{
type: 'ul',