Skip to content

Commit

Permalink
[0.9] Remove experimental flag for setBlockTypes (facebook#4045)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thegreatercurve
thegreatercurve authored Mar 8, 2023
1 parent d85f0f0 commit 643566d
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 50 deletions.
4 changes: 2 additions & 2 deletions packages/lexical-history/src/__tests__/unit/LexicalHistory.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import LexicalErrorBoundary from '@lexical/react/src/LexicalErrorBoundary';
import {HistoryPlugin} from '@lexical/react/src/LexicalHistoryPlugin';
import {RichTextPlugin} from '@lexical/react/src/LexicalRichTextPlugin';
import {$createQuoteNode} from '@lexical/rich-text/src';
import {$setBlocksType_experimental} from '@lexical/selection/src';
import {$setBlocksType} from '@lexical/selection/src';
import {
$createRangeSelection,
CAN_REDO_COMMAND,
Expand Down Expand Up @@ -146,7 +146,7 @@ describe('LexicalHistory tests', () => {
selection.focus.set(firstTextNode.getKey(), 3, 'text');

$setSelection(selection);
$setBlocksType_experimental(selection, () => $createQuoteNode());
$setBlocksType(selection, () => $createQuoteNode());
});
});

Expand Down
12 changes: 5 additions & 7 deletions packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
useBasicTypeaheadTriggerMatch,
} from '@lexical/react/LexicalTypeaheadMenuPlugin';
import {$createHeadingNode, $createQuoteNode} from '@lexical/rich-text';
import {$setBlocksType_experimental} from '@lexical/selection';
import {$setBlocksType} from '@lexical/selection';
import {INSERT_TABLE_COMMAND} from '@lexical/table';
import {
$createParagraphNode,
Expand Down Expand Up @@ -173,9 +173,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$setBlocksType_experimental(selection, () =>
$createParagraphNode(),
);
$setBlocksType(selection, () => $createParagraphNode());
}
}),
}),
Expand All @@ -188,7 +186,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$setBlocksType_experimental(selection, () =>
$setBlocksType(selection, () =>
// @ts-ignore Correct types, but since they're dynamic TS doesn't like it.
$createHeadingNode(`h${n}`),
);
Expand Down Expand Up @@ -237,7 +235,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$setBlocksType_experimental(selection, () => $createQuoteNode());
$setBlocksType(selection, () => $createQuoteNode());
}
}),
}),
Expand All @@ -250,7 +248,7 @@ export default function ComponentPickerMenuPlugin(): JSX.Element {

if ($isRangeSelection(selection)) {
if (selection.isCollapsed()) {
$setBlocksType_experimental(selection, () => $createCodeNode());
$setBlocksType(selection, () => $createCodeNode());
} else {
// Will this ever happen?
const textContent = selection.getTextContent();
Expand Down
29 changes: 13 additions & 16 deletions packages/lexical-playground/src/plugins/ToolbarPlugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import {
$isParentElementRTL,
$patchStyleText,
$selectAll,
$setBlocksType_experimental,
$setBlocksType,
} from '@lexical/selection';
import {
$findMatchingParent,
Expand Down Expand Up @@ -157,16 +157,15 @@ function BlockFormatDropDown({
disabled?: boolean;
}): JSX.Element {
const formatParagraph = () => {
if (blockType !== 'paragraph') {
editor.update(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
)
$setBlocksType_experimental(selection, () => $createParagraphNode());
});
}
editor.update(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
$setBlocksType(selection, () => $createParagraphNode());
}
});
};

const formatHeading = (headingSize: HeadingTagType) => {
Expand All @@ -177,9 +176,7 @@ function BlockFormatDropDown({
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
$setBlocksType_experimental(selection, () =>
$createHeadingNode(headingSize),
);
$setBlocksType(selection, () => $createHeadingNode(headingSize));
}
});
}
Expand Down Expand Up @@ -217,7 +214,7 @@ function BlockFormatDropDown({
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
$setBlocksType_experimental(selection, () => $createQuoteNode());
$setBlocksType(selection, () => $createQuoteNode());
}
});
}
Expand All @@ -233,7 +230,7 @@ function BlockFormatDropDown({
DEPRECATED_$isGridSelection(selection)
) {
if (selection.isCollapsed()) {
$setBlocksType_experimental(selection, () => $createCodeNode());
$setBlocksType(selection, () => $createCodeNode());
} else {
const textContent = selection.getTextContent();
const codeNode = $createCodeNode();
Expand Down
4 changes: 2 additions & 2 deletions packages/lexical-selection/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,12 +81,12 @@ Expands the current Selection to cover all of the content in the editor.
export function $selectAll(selection: RangeSelection): void;
```

#### `$setBlocksType_experimental`
#### `$setBlocksType`

Converts all nodes in the selection that are of one block type to another specified by parameter

```ts
export function $setBlocksType_experimental(
export function $setBlocksType(
selection: RangeSelection,
createElement: () => ElementNode,
): void;
Expand Down
2 changes: 1 addition & 1 deletion packages/lexical-selection/flow/LexicalSelection.js.flow
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ declare export function $wrapNodes(
createElement: () => ElementNode,
wrappingElement?: ElementNode,
): void;
declare export function $setBlocksType_experimental(
declare export function $setBlocksType(
selection: RangeSelection,
createElement: () => ElementNode,
): void;
Expand Down
26 changes: 13 additions & 13 deletions packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {$createHeadingNode} from '@lexical/rich-text';
import {
$addNodeStyle,
$getSelectionStyleValueForProperty,
$setBlocksType_experimental,
$setBlocksType,
} from '@lexical/selection';
import {$createTableNodeWithDimensions} from '@lexical/table';
import {
Expand Down Expand Up @@ -2279,7 +2279,7 @@ describe('LexicalSelection tests', () => {
});
});

describe('$setBlocksType_experimental', () => {
describe('$setBlocksType', () => {
test('Collapsed selection in text', async () => {
const testEditor = createTestEditor();
const element = document.createElement('div');
Expand Down Expand Up @@ -2308,7 +2308,7 @@ describe('LexicalSelection tests', () => {
type: 'text',
});

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2343,7 +2343,7 @@ describe('LexicalSelection tests', () => {
type: 'element',
});

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2382,7 +2382,7 @@ describe('LexicalSelection tests', () => {
type: 'text',
});

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2417,7 +2417,7 @@ describe('LexicalSelection tests', () => {
type: 'element',
});

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2458,7 +2458,7 @@ describe('LexicalSelection tests', () => {
type: 'text',
});

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2498,7 +2498,7 @@ describe('LexicalSelection tests', () => {

const columnChildrenPrev = column.getChildren();
expect(columnChildrenPrev[0].__type).toBe('paragraph');
$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2540,7 +2540,7 @@ describe('LexicalSelection tests', () => {

const columnChildrenPrev = column.getChildren();
expect(columnChildrenPrev[0].__type).toBe('paragraph');
$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2603,7 +2603,7 @@ describe('LexicalSelection tests', () => {
// @ts-ignore
const selection = $getSelection() as RangeSelection;

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2647,7 +2647,7 @@ describe('LexicalSelection tests', () => {
type: 'text',
});

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});

Expand Down Expand Up @@ -2692,7 +2692,7 @@ describe('LexicalSelection tests', () => {
type: 'text',
});

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});
});
Expand Down Expand Up @@ -2731,7 +2731,7 @@ describe('LexicalSelection tests', () => {
type: 'text',
});

$setBlocksType_experimental(selection, () => {
$setBlocksType(selection, () => {
return $createHeadingNode('h1');
});
});
Expand Down
4 changes: 2 additions & 2 deletions packages/lexical-selection/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
$moveCaretSelection,
$moveCharacter,
$selectAll,
$setBlocksType_experimental,
$setBlocksType,
$shouldOverrideDefaultCharacterSelection,
$wrapNodes,
} from './range-selection';
Expand All @@ -46,7 +46,7 @@ export {
$moveCaretSelection,
$moveCharacter,
$selectAll,
$setBlocksType_experimental,
$setBlocksType,
$shouldOverrideDefaultCharacterSelection,
$wrapNodes,
};
Expand Down
35 changes: 28 additions & 7 deletions packages/lexical-selection/src/range-selection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,29 +40,46 @@ import {getStyleObjectFromCSS} from './utils';
* @param createElement
* @returns
*/
export function $setBlocksType_experimental(
export function $setBlocksType(
selection: RangeSelection | GridSelection,
createElement: () => ElementNode,
): void {
if (selection.anchor.key === 'root') {
const element = createElement();
const root = $getRoot();
const firstChild = root.getFirstChild();
if (firstChild) firstChild.replace(element, true);
else root.append(element);

if (firstChild) {
firstChild.replace(element, true);
} else {
root.append(element);
}

return;
}

const nodes = selection.getNodes();
let maybeBlock = selection.anchor.getNode().getParentOrThrow();
if (nodes.indexOf(maybeBlock) === -1) nodes.push(maybeBlock);

if (nodes.indexOf(maybeBlock) === -1) {
nodes.push(maybeBlock);
}

if (maybeBlock.isInline()) {
maybeBlock = maybeBlock.getParentOrThrow();
if (nodes.indexOf(maybeBlock) === -1) nodes.push(maybeBlock);

if (nodes.indexOf(maybeBlock) === -1) {
nodes.push(maybeBlock);
}
}

for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
if (!isBlock(node)) continue;

if (!isBlock(node)) {
continue;
}

const targetElement = createElement();
targetElement.setFormat(node.getFormatType());
targetElement.setIndent(node.getIndent());
Expand All @@ -71,10 +88,14 @@ export function $setBlocksType_experimental(
}

function isBlock(node: LexicalNode): boolean {
if (!$isElementNode(node) || $isRootOrShadowRoot(node)) return false;
if (!$isElementNode(node) || $isRootOrShadowRoot(node)) {
return false;
}

const firstChild = node.getFirstChild();
const isLeafElement =
firstChild === null || $isTextNode(firstChild) || firstChild.isInline();

return !node.isInline() && node.canBeEmpty() !== false && isLeafElement;
}

Expand Down

0 comments on commit 643566d

Please sign in to comment.