Skip to content

Commit

Permalink
e
Browse files Browse the repository at this point in the history
  • Loading branch information
@winetree94
winetree94 committed Dec 21, 2023
1 parent f952338 commit ea09878
Show file tree
Hide file tree
Showing 15 changed files with 281 additions and 42 deletions.
6 changes: 3 additions & 3 deletions packages/core/src/plugins/reset-mark.ts
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import { Plugin as PMPlugin, TextSelection } from 'prosemirror-state';

/**
* Remove the StoredMark when the text corresponding to the Mark range is deleted.
*/
export const edimResetMarkPlugins = (): PMPlugin[] => {
const plugins: PMPlugin[] = [
new PMPlugin({
appendTransaction: (transactions, oldState, newState) => {
if (!transactions.some((tr) => tr.docChanged)) {
return;
}

if (!(newState.selection instanceof TextSelection)) {
return;
}

const { $cursor } = newState.selection;
if (!$cursor || !newState.storedMarks) {
return;
}

return newState.tr.setStoredMarks([]);
},
}),
Expand Down
1 change: 1 addition & 0 deletions packages/docs/src/components/editor/prose-mirror.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const ProseMirror = (props: ProseMirrorProps) => {
...props,
});
editorViewRef.current = view;
console.log(view);
return () => {
view.destroy();
};
Expand Down
156 changes: 153 additions & 3 deletions packages/docs/src/components/examples/packages/flat-task-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,161 @@ export const FlatTaskListExample = (props: ProseMirrorProps) => {
type: 'doc',
content: [
{
type: 'paragraph',
type: 'task_list',
content: [
{
type: 'text',
text: 'This is a minimal example of a ProseMirror editor with a few plugins.',
type: 'task_list_item',
attrs: {
indent: 1,
align: 'left',
checked: false,
},
content: [
{
type: 'paragraph',
attrs: {
align: 'left',
},
content: [
{
type: 'text',
text: 'asdfa',
},
],
},
],
},
{
type: 'task_list_item',
attrs: {
indent: 2,
align: 'left',
checked: false,
},
content: [
{
type: 'paragraph',
attrs: {
align: 'left',
},
content: [
{
type: 'text',
text: 'asdfasdf',
},
],
},
],
},
{
type: 'task_list_item',
attrs: {
indent: 2,
align: 'left',
checked: false,
},
content: [
{
type: 'paragraph',
attrs: {
align: 'left',
},
content: [
{
type: 'text',
text: 'asdfasdf',
},
],
},
],
},
{
type: 'task_list_item',
attrs: {
indent: 1,
align: 'left',
checked: true,
},
content: [
{
type: 'paragraph',
attrs: {
align: 'left',
},
content: [
{
type: 'text',
text: 'asdfasdfasdf',
},
],
},
],
},
{
type: 'task_list_item',
attrs: {
indent: 1,
align: 'left',
checked: true,
},
content: [
{
type: 'paragraph',
attrs: {
align: 'left',
},
content: [
{
type: 'text',
text: 'asdfas',
},
],
},
],
},
{
type: 'task_list_item',
attrs: {
indent: 2,
align: 'left',
checked: false,
},
content: [
{
type: 'paragraph',
attrs: {
align: 'left',
},
content: [
{
type: 'text',
text: 'fdasdf',
},
],
},
],
},
{
type: 'task_list_item',
attrs: {
indent: 2,
align: 'left',
checked: false,
},
content: [
{
type: 'paragraph',
attrs: {
align: 'left',
},
content: [
{
type: 'text',
text: 'asdfasdf',
},
],
},
],
},
],
},
Expand Down
1 change: 1 addition & 0 deletions packages/flat-list/src/commands/indent-list-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export const indentListItem = (
return tr;
}
return tr.setNodeMarkup(pos, node.type, {
...attrs,
indent: expectedIndent,
});
}, tr);
Expand Down
1 change: 0 additions & 1 deletion packages/flat-task-list/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
export * from './schemas';
export * from './plugins';
export * from './node-views';
export * from './components';
1 change: 0 additions & 1 deletion packages/flat-task-list/src/node-views/index.ts
View file

This file was deleted.

5 changes: 0 additions & 5 deletions packages/flat-task-list/src/node-views/task-list-item-node-view.ts
View file

This file was deleted.

4 changes: 4 additions & 0 deletions packages/flat-task-list/src/plugins/flat-task-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Plugin as PMPlugin } from 'prosemirror-state';
import { edimTaskListInputRulePlugins } from './input-rules';
import { edimFlatTaskListKeymapPlugins } from './keymaps';
import { edimFlatTaskListMergePlugins } from './merge';
import { edimTaskListItemNodeViewPlugins } from './task-list-item';

export interface EdimFlatTaskListPluginConfigs {
taskListNodeType: NodeType;
Expand All @@ -13,6 +14,9 @@ export const edimFlatTaskListPlugins = (
configs: EdimFlatTaskListPluginConfigs,
): PMPlugin[] => {
return [
...edimTaskListItemNodeViewPlugins({
taskListItemNodeType: configs.taskListItemNodeType,
}),
...edimTaskListInputRulePlugins({
taskListNodeType: configs.taskListNodeType,
}),
Expand Down
1 change: 1 addition & 0 deletions packages/flat-task-list/src/plugins/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export * from './input-rules';
export * from './keymaps';
export * from './flat-task-list';
export * from './merge';
export * from './task-list-item';
62 changes: 62 additions & 0 deletions packages/flat-task-list/src/plugins/task-list-item.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { NodeType } from 'prosemirror-model';
import { Plugin as PMPlugin } from 'prosemirror-state';
import { createNode } from '../utils';
import { EdimFlatTaskListItemAttrs } from '../schemas';

export interface EdimTaskListItemNodeViewPluginConfigs {
taskListItemNodeType: NodeType;
}

export const edimTaskListItemNodeViewPlugins = (
configs: EdimTaskListItemNodeViewPluginConfigs,
): PMPlugin[] => {
const plugins: PMPlugin[] = [
new PMPlugin({
props: {
nodeViews: {
[configs.taskListItemNodeType.name]: (node, view, getPos) => {
const li = createNode(node);

li.addEventListener('mousedown', (event) => {
const rect = li.getBoundingClientRect();
const clickX = event.clientX;
const liLeftX = rect.left;

const paddingLeftValue = li
.computedStyleMap()
.get('padding-left') as CSSUnitValue;
const paddingLeft = paddingLeftValue.value;

if (clickX > liLeftX + paddingLeft) {
return;
}

const pos = getPos();
if (pos === undefined) {
return;
}

const attrs = node.attrs as EdimFlatTaskListItemAttrs;
const tr = view.state.tr.setNodeMarkup(
pos,
configs.taskListItemNodeType,
{
...attrs,
checked: !attrs.checked,
},
);
view.dispatch(tr);
});

return {
dom: li,
contentDOM: li,
destroy: () => {},
};
},
},
},
}),
];
return plugins;
};
48 changes: 27 additions & 21 deletions packages/flat-task-list/src/schemas/task-list-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
parseQuillIndent,
parseQuillTextAlign,
} from '@edim-editor/core';
import { createNode } from '../utils';

export const EDIM_DEFAULT_FLAT_TASK_LIST_ITEM_NODE_NAME = 'task_list_item';

Expand Down Expand Up @@ -47,12 +48,12 @@ export const edimFlatTaskListItemNodes = (
{
tag: 'li',
getAttrs(node) {
const dom = node as HTMLElement;
const dom = node as HTMLLIElement;
const align = dom.getAttribute('data-text-align');
const quillAlign = parseQuillTextAlign(dom);
const indent = dom.dataset['indent'];
const quillIndent = parseQuillIndent(dom);
const checked = dom.dataset['checked'];
const checked = dom.dataset['checked'] === 'true';

if (dom.parentElement && isQuillTaskList(dom.parentElement)) {
return {
Expand All @@ -71,25 +72,30 @@ export const edimFlatTaskListItemNodes = (
},
],
toDOM(node) {
const attrs = node.attrs as EdimFlatTaskListItemAttrs;
const classes = ['edim-task-list-item'];
if (attrs.align && attrs.align !== 'left') {
classes.push(`edim-align-${attrs.align}`);
}
classes.push(`edim-indent-${attrs.indent || 1}`);
if (attrs.checked) {
classes.push('edim-task-list-item-checked');
}
return [
'li',
{
class: classes.join(' '),
'data-text-align': attrs.align || 'left',
'data-indent': attrs.indent || 1,
'data-checked': attrs.checked ? 'true' : 'false',
},
0,
];
const li = createNode(node);
return {
dom: li,
contentDOM: li,
};
// const attrs = node.attrs as EdimFlatTaskListItemAttrs;
// const classes = ['edim-task-list-item'];
// if (attrs.align && attrs.align !== 'left') {
// classes.push(`edim-align-${attrs.align}`);
// }
// classes.push(`edim-indent-${attrs.indent || 1}`);
// if (attrs.checked) {
// classes.push('edim-task-list-item-checked');
// }
// return [
// 'li',
// {
// class: classes.join(' '),
// 'data-text-align': attrs.align || 'left',
// 'data-indent': attrs.indent || 1,
// 'data-checked': attrs.checked ? 'true' : 'false',
// },
// 0,
// ];
},
defining: true,
};
Expand Down
Loading

0 comments on commit ea09878

Please sign in to comment.