Inspired by making quadrats(aka artibox) currently based on slate
w/ quadrats v0
How to define, query and transform json
How to define location
How to cooperate json w/ location
interface Text {
text: string;
}
const someText = {
text: 'a text',
};
interface Text {
text: string;
[prop: string]: any;
}
const boldText = {
text: 'bold text',
bold: true,
};
The properties of text.
Block, Inline, Void
interface Element {
type: string;
children: Node[];
[prop: string]: any;
}
const paragraphElement = {
type: 'paragraph',
children: [...],
};
const linkElement = {
type: 'link',
children: [...],
url: 'https://example.com',
};
A node schema of json tree
type Node = Element | Text;
The root node of json tree. Has other information e.g. selection.
interface Editor {
children: Node[];
selection?: Range;
}
controller
Path
type Path = number[]
const editor = {
children: [
{
type: 'paragraph',
children: [
{
text: 'A line of text!',
},
],
},
],
}
The path of text is [0, 0].
Point
interface Point {
path: Path;
offset: number;
}
const start = {
path: [0, 0],
offset: 0,
};
const end = {
path: [0, 0],
offset: 15,
};
Range / Selection
interface Range {
anchor: Point;
focus: Point;
}
Range / Selection - Collapsed
anchor === focus
Range / Selection - Expanded(forwards)
anchor is before focus
Range / Selection - Expanded(backwards)
anchor is after focus
Not Tree Shakable Api
export const Transforms = {
insertNodes() {
},
wrapNodes() {
},
};
export function insertNodes() {
}
export function wrapNodes() {
}
Too low level apis
Some common queries or transforms need to implemented by ourselves
...etc
All common features a rich editor will have.
Provide all a feature needing
utils/helpers
queries
transforms
...etc
The libary/framework to render json and handle events
editor related components
event handlers
hooks
...etc.
Rendering
event handlers
blockquote
extends core
provide renderer and event handlers
toolbar
blockquote - toolbar
jsx-serializer
Not really care about composition event.
Currently I just hack.
...etc
e.g. react
core
common/a
common/b
react/a
react/b
react/a/toolbar
react/b/toolbar
react
react/toolbar
w/ jsx
/** @jsx jsx */
import { jsx } from 'somewhere';
/** @jsx jsx */
import { jsx } from 'somewhere';
const input = (
<editor>
<element>
<cursor />
foo
</element>
</editor>
);
const output = {
children: [
{
children: [
{
text: 'foo'
}
]
}
],
selection: {
anchor: { path: [0, 0], offset: 0 },
focus: { path: [0, 0], offset: 0 },
}
};
/** @jsx jsx */
import { jsx } from '../../../../__fixtures__/hyperscript';
import { isSelectionAtBlockEdge } from './isSelectionAtBlockEdge';
describe('isSelectionAtBlockEdge', () => {
it('collpased on block start', () => {
const input = (
<editor>
<element>
<cursor />
foo
</element>
</editor>
);
expect(isSelectionAtBlockEdge(input)).toBe('start');
});
it('collpased on block center', () => {
const input = (
<editor>
<element>
fo
<cursor />
o
</element>
</editor>
);
expect(isSelectionAtBlockEdge(input)).toBe(undefined);
});
it('collpased on block end', () => {
const input = (
<editor>
<element>
foo
<cursor />
</element>
</editor>
);
expect(isSelectionAtBlockEdge(input)).toBe('end');
});
it('expanded, focus on block start', () => {
const input = (
<editor>
<element>
<focus />
fo
<anchor />
o
</element>
</editor>
);
expect(isSelectionAtBlockEdge(input)).toBe('start');
});
it('expanded, focus on block center', () => {
const input = (
<editor>
<element>
<anchor />
fo
<focus />
o
</element>
</editor>
);
expect(isSelectionAtBlockEdge(input)).toBe(undefined);
});
it('expanded, focus on block end', () => {
const input = (
<editor>
<element>
fo
<anchor />
o
<focus />
</element>
</editor>
);
expect(isSelectionAtBlockEdge(input)).toBe('end');
});
});
remove slate
make apis friendly
provide all common apis
well testing
PR welcome
PR welcome
remove slate-react
fix composition
PR welcome
Someone implement slate-vue but
enable flag: usedExports or using production
Mark files as side-effect-free
No CommonJs, it's a joke
Use resolve.mainFields of webpack correctly. Order is important.
only jsx-serializer, use commonjs from main field
only jsx-serializer, use es module from module field