0.400.0-dev.0 • Published 4 days ago
@holochain-syn/text-editor v0.400.0-dev.0
@holochain-syn/text-editor
A syn
text editor grammar and editor element, to easily build real-time collaborative text editors in Holochain.
You can use the text-editor and its grammar as the only state in your syn
application, or use it as a subcomponent of a larger state in your application.
Using the Grammar
As the Standalone grammar in your Syn app
import { textEditorGrammar } from '@holochain-syn/text-editor';
import { SynStore } from '@holochain-syn/store';
// ... instantiate the client
const store = new SynStore(client, textEditorGrammar);
Including the Grammar into your own Grammar
import { SynGrammar } from '@syn/store';
import { textEditorGrammar, TextEditorState } from '@holochain-syn/text-editor';
interface DocumentState {
title: string;
body: TextEditorState;
}
type DocumentState =
| {
type: 'SetTitle';
title: string;
}
| {
type: 'TextEditorDelta';
textEditorDelta: TextEditorDelta;
};
type DocumentGrammar = SynGrammar<CounterState, CounterDelta>;
const DocumentGrammar: DocumentGrammar = {
initialState: {
title: '',
body: textEditorGrammar.initialState,
},
applyDelta(
state: CounterState,
delta: CounterDelta,
author: AgentPubKeyB64
): CounterState {
if (delta.type === 'SetTitle') {
return {
title: delta.title,
...state,
};
} else {
return {
body: textEditorGrammar.applyDelta(
state.body,
delta.textEditorDelta,
author
),
...state,
};
}
},
};
Using the element.
- Attach the context as seen in the context section of @holochain-syn/elements.
- Define the element:
import '@holochain-syn/text-editor/dist/elements/syn-markdown-editor.js';
- Include it in your html:
<syn-context>
<syn-markdown-editor id="text-editor"></syn-markdown-editor>
</syn-context>
- Instantiate and pass it its
SynSlice
:
import { TextEditorGrammar } from '@holochain-syn/text-editor';
import { derived } from '@holochain-open-dev/stores';
function textEditorSlice(
store: SynStore<DocumentGrammar>
): SynSlice<TextEditorGrammar> {
return {
state: derived(this.sessionStore.state, document => document.body),
requestChanges(deltas: TextEditorDelta[]) {
const documentDeltas = deltas.map(d => ({
type: 'TextEditorDelta',
textEditorDelta: d,
}));
return this.sessionStore.requestChanges(documentDeltas);
},
};
}
const slice = textEditorSlice(store);
// Here you can also pass the slice as an input if you're using any JS framework
document.getElementById('text-editor').synSlice = slice;
0.400.0-dev.0
4 days ago
0.300.0-dev.0
2 months ago
0.12.1
4 months ago
0.11.0
5 months ago
0.12.0
5 months ago
0.10.0
5 months ago
0.9.0
6 months ago
0.8.0
6 months ago
0.7.0
7 months ago
0.6.0
8 months ago
0.5.0
1 year ago
0.3.0
1 year ago
0.4.1
1 year ago
0.4.0
1 year ago
0.4.2
1 year ago
0.3.0-alpha.6
1 year ago
0.3.0-alpha.7
1 year ago
0.3.0-alpha.2
1 year ago
0.3.0-alpha.4
1 year ago
0.3.0-alpha.5
1 year ago
0.3.0-alpha.1
1 year ago
0.2.4
1 year ago
0.2.1
2 years ago
0.2.0
2 years ago
0.2.2
2 years ago
0.1.2
2 years ago
0.0.10
2 years ago
0.1.0
2 years ago
0.1.1
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.6
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago