Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | import { Modifier, SelectionState, EditorState as ES } from "draft-js";
import { getSelectionCustomInlineStyle } from "draftjs-utils";
import { OrderedSet } from "immutable";
import { EditorState } from "react-draft-wysiwyg-next";
export function isAllSelected(editorState: EditorState) {
const contentState = editorState.getCurrentContent();
const selection = editorState.getSelection();
const firstBlock = contentState.getFirstBlock();
const lastBlock = contentState.getLastBlock();
if (selection.getEndOffset() === 0) return false
return (
selection.getStartKey() === firstBlock.getKey() &&
selection.getStartOffset() === 0 &&
selection.getEndKey() === lastBlock.getKey() &&
selection.getEndOffset() === lastBlock.getLength()
);
}
export function updateLiFontSizes(newFontSize: string) {
const editor = document.querySelector(".DraftEditor-root");
const listItems = editor?.querySelectorAll("li");
if (listItems) {
listItems.forEach((li) => {
li.setAttribute("style", `font-size:${newFontSize}px`);
});
}
}
export function forceFullSelection(editorState: EditorState) {
const contentState = editorState.getCurrentContent();
const firstBlock = contentState.getFirstBlock();
const lastBlock = contentState.getLastBlock();
const fullSelection = editorState.getSelection().merge({
anchorKey: firstBlock.getKey(),
anchorOffset: 0,
focusKey: lastBlock.getKey(),
focusOffset: lastBlock.getLength(),
isBackward: false,
});
return ES.forceSelection(editorState, fullSelection);
}
export function updateAllSelectedInlineFontSize(editorState: EditorState,
newFontSize: string,
FONT_SIZE_STYLES: any[]) {
let contentState = editorState.getCurrentContent();
const selection = editorState.getSelection();
const startKey = selection.getStartKey();
const endKey = selection.getEndKey();
let blockKey = startKey;
while (blockKey) {
const block = contentState.getBlockForKey(blockKey);
const blockSelection = SelectionState.createEmpty(blockKey).merge({
anchorOffset: 0,
focusOffset: block.getLength(),
});
FONT_SIZE_STYLES.forEach((style) => {
contentState = Modifier.removeInlineStyle(contentState, blockSelection, style);
});
contentState = Modifier.applyInlineStyle(
contentState,
blockSelection,
`fontsize-${newFontSize}`
);
contentState = Modifier.setBlockData(
contentState,
blockSelection,
block.getData().merge({ fontSize: newFontSize })
);
// Stop when we have updated the last block in the selection.
if (blockKey === endKey) break;
blockKey = contentState.getKeyAfter(blockKey);
}
let newEditorState = ES.push(editorState, contentState, 'change-inline-style');
newEditorState = forceFullSelection(newEditorState);
return newEditorState;
}
export function updateLastListItem(editorState: EditorState) {
const inlineState = getSelectionCustomInlineStyle(editorState, [
"FONTSIZE",
]).FONTSIZE?.split("-")[1];
setTimeout(() => {
const editor = document.querySelector(".DraftEditor-root");
const listItems = editor?.querySelectorAll("li");
if (listItems) {
const lastItem = listItems[listItems?.length - 1];
if (lastItem) {
lastItem.setAttribute("style", `font-size:${inlineState}px`);
}
}
}, 0);
}
export function mergeInlineStylesForSelectedBlocks(editorState: EditorState,
newFontSize: string,
FONT_SIZE_STYLES: any[]) {
let contentState = editorState.getCurrentContent();
const selection = editorState.getSelection();
const startKey = selection.getStartKey();
const endKey = selection.getEndKey();
const blockKeys = [];
let key = startKey;
while (key) {
blockKeys.push(key);
if (key === endKey) break;
key = contentState.getKeyAfter(key);
}
if (blockKeys.length === 1) {
return { editorState, updated: false }
}
blockKeys.forEach((blockKey) => {
const block = contentState.getBlockForKey(blockKey);
const blockSelection = SelectionState.createEmpty(blockKey).merge({
anchorOffset: 0,
focusOffset: block.getLength(),
});
const text = block.getText();
FONT_SIZE_STYLES.forEach((style) => {
contentState = Modifier.removeInlineStyle(contentState, blockSelection, style);
});
// Replace the text with itself while applying the new inline style.
contentState = Modifier.replaceText(
contentState,
blockSelection,
text,
OrderedSet.of(`FONTSIZE-${newFontSize}`)
);
contentState = Modifier.setBlockData(
contentState,
blockSelection,
block.getData().merge({ fontSize: newFontSize })
);
});
return { editorState: ES.push(editorState, contentState, 'change-inline-style'), updated: true };
} |