Skip to content

Commit

Permalink
feat: config Loro text style automatically based on ProseMirror schema
Browse files Browse the repository at this point in the history
  • Loading branch information
ocavue committed Aug 20, 2024
1 parent b0a1bc1 commit eae8190
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 19 deletions.
17 changes: 3 additions & 14 deletions examples/stories/src/stories/Editor.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const meta = {
export default meta;

export const Basic = () => {
const loroARef = useRef<Loro>(createLoro());
const loroARef = useRef<Loro>(new Loro());
const idA = loroARef.current.peerIdStr;
const awarenessA = useRef<CursorAwareness>(new CursorAwareness(idA));
return (
Expand All @@ -27,22 +27,11 @@ export const Basic = () => {
);
};

function createLoro() {
const doc = new Loro();
doc.configTextStyle({
em: { expand: "after" },
strong: { expand: "after" },
code: { expand: "none" },
link: { expand: "none" },
});
return doc;
}

export const Sync = () => {
const loroARef = useRef<Loro>(createLoro());
const loroARef = useRef<Loro>(new Loro());
const idA = loroARef.current.peerIdStr;
const awarenessA = useRef<CursorAwareness>(new CursorAwareness(idA));
const loroBRef = useRef<Loro>(createLoro());
const loroBRef = useRef<Loro>(new Loro());
const idB = loroBRef.current.peerIdStr;
const awarenessB = useRef<CursorAwareness>(new CursorAwareness(idB));
useEffect(() => {
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"author": "Loro Team",
"license": "MIT",
"dependencies": {
"just-map-values": "^3.2.0",
"lib0": "^0.2.42"
},
"peerDependencies": {
Expand Down
7 changes: 7 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 10 additions & 5 deletions src/sync-plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
createNodeFromLoroObj,
updateLoroToPmState,
} from "./lib";
import { configLoroTextStyle } from "./text-style";

export const loroSyncPluginKey = new PluginKey<LoroSyncPluginState>("loro-sync");

Expand Down Expand Up @@ -52,11 +53,15 @@ export const LoroSyncPlugin = (props: LoroSyncPluginProps): Plugin => {
},
},
state: {
init: (config, editorState): LoroSyncPluginState => ({
doc: props.doc,
mapping: props.mapping ?? new Map(),
changedBy: "local"
}),
init: (config, editorState): LoroSyncPluginState => {
configLoroTextStyle(props.doc, editorState.schema);

return {
doc: props.doc,
mapping: props.mapping ?? new Map(),
changedBy: "local"
}
},
apply: (tr, state, oldEditorState, newEditorState) => {
const meta = tr.getMeta(
loroSyncPluginKey,
Expand Down
23 changes: 23 additions & 0 deletions src/text-style.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import type { Schema } from "prosemirror-model";
import mapValues from "just-map-values";
import type { Loro } from "loro-crdt";

const LORO_TEXT_STYLE_CACHE = new WeakSet<Loro>();

function getLoroTextStyle(schema: Schema): {
[mark: string]: { expand: "before" | "after" | "none" | "both" };
} {
return mapValues(schema.marks, (mark) => {
return { expand: mark.spec.inclusive ? "after" : "none" };
});
}

export function configLoroTextStyle(doc: Loro, schema: Schema) {
// Avoid reconfiguring the text style for the same Loro document.
if (LORO_TEXT_STYLE_CACHE.has(doc)) {
return;
}
LORO_TEXT_STYLE_CACHE.add(doc);

doc.configTextStyle(getLoroTextStyle(schema));
}
3 changes: 3 additions & 0 deletions src/undo-plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
cursorToAbsolutePosition,
} from "./cursor-plugin";
import { loroSyncPluginKey } from "./sync-plugin";
import { configLoroTextStyle } from "./text-style";

export interface LoroUndoPluginProps {
doc: Loro;
Expand Down Expand Up @@ -41,6 +42,8 @@ export const LoroUndoPlugin = (props: LoroUndoPluginProps): Plugin => {
key: loroUndoPluginKey,
state: {
init: (config, editorState): LoroUndoPluginState => {
configLoroTextStyle(props.doc, editorState.schema);

undoManager.addExcludeOriginPrefix("sys:init");
return {
undoManager,
Expand Down

0 comments on commit eae8190

Please sign in to comment.