@atlaskit/editor-plugin-synced-block 2.1.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-dev-agents/tsconfig.json +3 -0
- package/afm-jira/tsconfig.json +3 -0
- package/afm-passionfruit/tsconfig.json +3 -0
- package/afm-post-office/tsconfig.json +3 -0
- package/afm-rovo-extension/tsconfig.json +3 -0
- package/afm-townsquare/tsconfig.json +3 -0
- package/dist/cjs/nodeviews/syncedBlock.js +118 -75
- package/dist/cjs/pm-plugins/actions.js +23 -9
- package/dist/cjs/pm-plugins/main.js +4 -3
- package/dist/cjs/pm-plugins/utils/utils.js +11 -0
- package/dist/cjs/syncedBlockPlugin.js +6 -3
- package/dist/cjs/ui/SyncBlockEditorWrapper.js +38 -0
- package/dist/cjs/ui/SyncBlockRendererWrapper.js +26 -0
- package/dist/cjs/ui/floating-toolbar.js +58 -3
- package/dist/es2019/nodeviews/syncedBlock.js +103 -67
- package/dist/es2019/pm-plugins/actions.js +23 -8
- package/dist/es2019/pm-plugins/main.js +4 -3
- package/dist/es2019/pm-plugins/utils/utils.js +7 -0
- package/dist/es2019/syncedBlockPlugin.js +4 -3
- package/dist/es2019/ui/SyncBlockEditorWrapper.js +28 -0
- package/dist/es2019/ui/SyncBlockRendererWrapper.js +20 -0
- package/dist/es2019/ui/floating-toolbar.js +56 -2
- package/dist/esm/nodeviews/syncedBlock.js +116 -72
- package/dist/esm/pm-plugins/actions.js +21 -8
- package/dist/esm/pm-plugins/main.js +4 -3
- package/dist/esm/pm-plugins/utils/utils.js +5 -0
- package/dist/esm/syncedBlockPlugin.js +6 -3
- package/dist/esm/ui/SyncBlockEditorWrapper.js +31 -0
- package/dist/esm/ui/SyncBlockRendererWrapper.js +19 -0
- package/dist/esm/ui/floating-toolbar.js +57 -3
- package/dist/types/nodeviews/syncedBlock.d.ts +29 -15
- package/dist/types/pm-plugins/actions.d.ts +3 -1
- package/dist/types/pm-plugins/main.d.ts +3 -3
- package/dist/types/pm-plugins/utils/utils.d.ts +3 -0
- package/dist/types/syncedBlockPluginType.d.ts +4 -2
- package/dist/types/ui/SyncBlockEditorWrapper.d.ts +16 -0
- package/dist/types/ui/SyncBlockRendererWrapper.d.ts +9 -0
- package/dist/types/ui/floating-toolbar.d.ts +6 -2
- package/dist/types-ts4.5/nodeviews/syncedBlock.d.ts +29 -15
- package/dist/types-ts4.5/pm-plugins/actions.d.ts +3 -1
- package/dist/types-ts4.5/pm-plugins/main.d.ts +3 -3
- package/dist/types-ts4.5/pm-plugins/utils/utils.d.ts +3 -0
- package/dist/types-ts4.5/syncedBlockPluginType.d.ts +6 -2
- package/dist/types-ts4.5/ui/SyncBlockEditorWrapper.d.ts +16 -0
- package/dist/types-ts4.5/ui/SyncBlockRendererWrapper.d.ts +9 -0
- package/dist/types-ts4.5/ui/floating-toolbar.d.ts +6 -2
- package/package.json +6 -4
|
@@ -1,19 +1,32 @@
|
|
|
1
|
+
import uuid from 'uuid';
|
|
2
|
+
import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
|
|
3
|
+
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
1
4
|
import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
-
var getRandomId = function getRandomId() {
|
|
3
|
-
if (!globalThis.crypto || typeof globalThis.crypto.randomUUID !== 'function') {
|
|
4
|
-
return new Date().toISOString();
|
|
5
|
-
}
|
|
6
|
-
return globalThis.crypto.randomUUID();
|
|
7
|
-
};
|
|
8
5
|
export var createSyncedBlock = function createSyncedBlock(state) {
|
|
6
|
+
var id = uuid();
|
|
9
7
|
var tr = state.tr;
|
|
10
8
|
// const { breakout } = state.schema.marks;
|
|
11
9
|
var node = state.schema.nodes.syncBlock.createChecked({
|
|
12
|
-
resourceId:
|
|
13
|
-
localId:
|
|
10
|
+
resourceId: id,
|
|
11
|
+
localId: id
|
|
14
12
|
}, null
|
|
15
13
|
// [breakout.create({ mode: 'wide' })],
|
|
16
14
|
);
|
|
17
15
|
safeInsert(node)(tr);
|
|
18
16
|
return tr;
|
|
17
|
+
};
|
|
18
|
+
export var copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(state, _dispatch, _view) {
|
|
19
|
+
var schema = state.schema,
|
|
20
|
+
selection = state.selection;
|
|
21
|
+
if (selection instanceof NodeSelection) {
|
|
22
|
+
var nodeType = selection.node.type;
|
|
23
|
+
var domNode = toDOM(selection.node, schema);
|
|
24
|
+
// clear local-id
|
|
25
|
+
if (domNode instanceof HTMLElement) {
|
|
26
|
+
domNode.setAttribute('data-local-id', '');
|
|
27
|
+
}
|
|
28
|
+
copyDomNode(domNode, nodeType, selection);
|
|
29
|
+
return true;
|
|
30
|
+
}
|
|
31
|
+
return false;
|
|
19
32
|
};
|
|
@@ -5,7 +5,7 @@ export var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
|
|
|
5
5
|
|
|
6
6
|
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
|
|
7
7
|
|
|
8
|
-
export var createPlugin = function createPlugin(
|
|
8
|
+
export var createPlugin = function createPlugin(options, pmPluginFactoryParams, _syncBlockStore, api) {
|
|
9
9
|
return new SafePlugin({
|
|
10
10
|
key: syncedBlockPluginKey,
|
|
11
11
|
state: {
|
|
@@ -23,8 +23,9 @@ export var createPlugin = function createPlugin(config, pmPluginFactoryParams, _
|
|
|
23
23
|
props: {
|
|
24
24
|
nodeViews: {
|
|
25
25
|
syncBlock: lazySyncBlockView({
|
|
26
|
-
|
|
27
|
-
pmPluginFactoryParams: pmPluginFactoryParams
|
|
26
|
+
options: options,
|
|
27
|
+
pmPluginFactoryParams: pmPluginFactoryParams,
|
|
28
|
+
api: api
|
|
28
29
|
})
|
|
29
30
|
}
|
|
30
31
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
+
export var findSyncBlock = function findSyncBlock(state, selection) {
|
|
3
|
+
var syncBlock = state.schema.nodes.syncBlock;
|
|
4
|
+
return findSelectedNodeOfType(syncBlock)(selection || state.selection) || findParentNodeOfType(syncBlock)(selection || state.selection);
|
|
5
|
+
};
|
|
@@ -6,7 +6,8 @@ import { createSyncedBlock } from './pm-plugins/actions';
|
|
|
6
6
|
import { createPlugin } from './pm-plugins/main';
|
|
7
7
|
import { getToolbarConfig } from './ui/floating-toolbar';
|
|
8
8
|
export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
|
|
9
|
-
var config = _ref.config
|
|
9
|
+
var config = _ref.config,
|
|
10
|
+
api = _ref.api;
|
|
10
11
|
var syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
|
|
11
12
|
return {
|
|
12
13
|
name: 'syncedBlock',
|
|
@@ -20,7 +21,7 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
|
|
|
20
21
|
return [{
|
|
21
22
|
name: 'syncedBlockPlugin',
|
|
22
23
|
plugin: function plugin(params) {
|
|
23
|
-
return createPlugin(config, params, syncBlockStore);
|
|
24
|
+
return createPlugin(config, params, syncBlockStore, api);
|
|
24
25
|
}
|
|
25
26
|
}];
|
|
26
27
|
},
|
|
@@ -43,7 +44,9 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
|
|
|
43
44
|
}
|
|
44
45
|
}];
|
|
45
46
|
},
|
|
46
|
-
floatingToolbar:
|
|
47
|
+
floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
|
|
48
|
+
return getToolbarConfig(state, intl, config, providerFactory);
|
|
49
|
+
}
|
|
47
50
|
}
|
|
48
51
|
};
|
|
49
52
|
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export var SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
|
|
3
|
+
var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
|
|
4
|
+
var defaultDocument = _ref.defaultDocument,
|
|
5
|
+
getSyncedBlockEditor = _ref.getSyncedBlockEditor,
|
|
6
|
+
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
7
|
+
popupsMountPoint = _ref.popupsMountPoint,
|
|
8
|
+
setInnerEditorView = _ref.setInnerEditorView,
|
|
9
|
+
handleContentChanges = _ref.handleContentChanges;
|
|
10
|
+
return (
|
|
11
|
+
/*#__PURE__*/
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
|
|
13
|
+
React.createElement("div", {
|
|
14
|
+
"data-testid": SyncBlockEditorWrapperDataId,
|
|
15
|
+
style: {
|
|
16
|
+
border: 'purple solid 1px'
|
|
17
|
+
}
|
|
18
|
+
}, getSyncedBlockEditor({
|
|
19
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
20
|
+
defaultDocument: defaultDocument,
|
|
21
|
+
popupsMountPoint: popupsMountPoint,
|
|
22
|
+
onChange: function onChange(value) {
|
|
23
|
+
return handleContentChanges(value.state.doc);
|
|
24
|
+
},
|
|
25
|
+
onEditorReady: function onEditorReady(value) {
|
|
26
|
+
return setInnerEditorView(value.editorView);
|
|
27
|
+
}
|
|
28
|
+
}))
|
|
29
|
+
);
|
|
30
|
+
};
|
|
31
|
+
export var SyncBlockEditorWrapper = /*#__PURE__*/React.memo(SyncBlockEditorWrapperComponent);
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
|
|
3
|
+
var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
|
|
4
|
+
var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
|
|
5
|
+
docNode = _ref.docNode;
|
|
6
|
+
return (
|
|
7
|
+
/*#__PURE__*/
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
|
|
9
|
+
React.createElement("div", {
|
|
10
|
+
"data-testid": SyncBlockRendererWrapperDataId,
|
|
11
|
+
style: {
|
|
12
|
+
border: 'blue solid 1px'
|
|
13
|
+
}
|
|
14
|
+
}, getSyncedBlockRenderer({
|
|
15
|
+
docNode: docNode
|
|
16
|
+
}))
|
|
17
|
+
);
|
|
18
|
+
};
|
|
19
|
+
export var SyncBlockRendererWrapper = /*#__PURE__*/React.memo(SyncBlockRendererWrapperComponent);
|
|
@@ -1,5 +1,59 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
+
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
3
|
+
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
|
|
4
|
+
import { copySyncedBlockReferenceToClipboard } from '../pm-plugins/actions';
|
|
5
|
+
import { findSyncBlock } from '../pm-plugins/utils/utils';
|
|
6
|
+
export var getToolbarConfig = function getToolbarConfig(state, _intl) {
|
|
7
|
+
var _options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
8
|
+
var _providerFactory = arguments.length > 3 ? arguments[3] : undefined;
|
|
9
|
+
var syncBlockObject = findSyncBlock(state);
|
|
10
|
+
if (!syncBlockObject) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
var nodeType = state.schema.nodes.syncBlock;
|
|
14
|
+
var items = [];
|
|
15
|
+
var copyButton = {
|
|
16
|
+
id: 'editor.syncedBlock.copy',
|
|
17
|
+
type: 'button',
|
|
18
|
+
appearance: 'subtle',
|
|
19
|
+
icon: CopyIcon,
|
|
20
|
+
title: 'Copy',
|
|
21
|
+
showTitle: true,
|
|
22
|
+
tooltipContent: 'Copy reference to clipboard',
|
|
23
|
+
onClick: copySyncedBlockReferenceToClipboard
|
|
24
|
+
};
|
|
25
|
+
items.push(copyButton);
|
|
26
|
+
if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
|
|
27
|
+
var editSourceButton = {
|
|
28
|
+
id: 'editor.syncedBlock.editSource',
|
|
29
|
+
type: 'button',
|
|
30
|
+
appearance: 'subtle',
|
|
31
|
+
icon: LinkExternalIcon,
|
|
32
|
+
title: 'Edit source',
|
|
33
|
+
showTitle: true,
|
|
34
|
+
tooltipContent: 'Navigate to source page of the sync block',
|
|
35
|
+
disabled: true,
|
|
36
|
+
onClick: function onClick(_state, _dispatch, view) {
|
|
37
|
+
if (!view) {
|
|
38
|
+
return false;
|
|
39
|
+
}
|
|
40
|
+
// to be implemented in a follow up PR
|
|
41
|
+
return true;
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
items.push(editSourceButton);
|
|
45
|
+
}
|
|
46
|
+
var getDomRef = function getDomRef(editorView) {
|
|
47
|
+
var domAtPos = editorView.domAtPos.bind(editorView);
|
|
48
|
+
var element = findDomRefAtPos(syncBlockObject.pos, domAtPos);
|
|
49
|
+
return element;
|
|
50
|
+
};
|
|
51
|
+
return {
|
|
52
|
+
title: 'Synced Block floating controls',
|
|
53
|
+
getDomRef: getDomRef,
|
|
54
|
+
nodeType: nodeType,
|
|
55
|
+
items: items,
|
|
56
|
+
scrollable: true,
|
|
57
|
+
groupLabel: 'Synced blocks'
|
|
4
58
|
};
|
|
5
59
|
};
|
|
@@ -1,28 +1,42 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
2
|
+
import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
3
|
+
import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
|
|
4
|
+
import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
|
|
5
|
+
import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
|
|
6
|
+
import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
|
|
5
7
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
6
8
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
7
|
-
import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
10
|
+
export interface SyncBlockNodeViewProps extends ReactComponentProps {
|
|
11
|
+
api?: ExtractInjectionAPI<SyncedBlockPlugin>;
|
|
12
|
+
eventDispatcher: EventDispatcher;
|
|
13
|
+
getPos: getPosHandler;
|
|
14
|
+
isNodeNested?: boolean;
|
|
15
|
+
node: PMNode;
|
|
16
|
+
options: SyncedBlockPluginOptions | undefined;
|
|
17
|
+
portalProviderAPI: PortalProviderAPI;
|
|
18
|
+
view: EditorView;
|
|
19
|
+
}
|
|
16
20
|
declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
|
|
21
|
+
private isSource;
|
|
22
|
+
private options;
|
|
23
|
+
constructor(props: SyncBlockNodeViewProps);
|
|
17
24
|
unsubscribe: (() => void) | undefined;
|
|
18
25
|
createDomRef(): HTMLElement;
|
|
19
|
-
|
|
26
|
+
private handleContentChanges;
|
|
27
|
+
private setInnerEditorView;
|
|
28
|
+
private renderEditor;
|
|
29
|
+
private renderRenderer;
|
|
30
|
+
render(): React.JSX.Element | null;
|
|
20
31
|
stopEvent(event: Event): boolean;
|
|
32
|
+
selectNode(): void;
|
|
21
33
|
destroy(): void;
|
|
34
|
+
private selectSyncBlockNode;
|
|
22
35
|
}
|
|
23
36
|
export interface SyncBlockNodeViewProperties {
|
|
24
|
-
|
|
37
|
+
api?: ExtractInjectionAPI<SyncedBlockPlugin>;
|
|
38
|
+
options: SyncedBlockPluginOptions | undefined;
|
|
25
39
|
pmPluginFactoryParams: PMPluginFactoryParams;
|
|
26
40
|
}
|
|
27
|
-
export declare const syncBlockNodeView: ({
|
|
41
|
+
export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
|
|
28
42
|
export {};
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Command } from '@atlaskit/editor-common/types';
|
|
2
|
+
import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
3
|
export declare const createSyncedBlock: (state: EditorState) => Transaction;
|
|
4
|
+
export declare const copySyncedBlockReferenceToClipboard: Command;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
|
|
3
|
-
import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
5
|
+
import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
6
6
|
export declare const syncedBlockPluginKey: PluginKey<any>;
|
|
7
7
|
type SyncedBlockPluginState = {};
|
|
8
|
-
export declare const createPlugin: (
|
|
8
|
+
export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, _syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
|
|
9
9
|
export {};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
+
export declare const findSyncBlock: (state: EditorState, selection?: Selection | null) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;
|
|
@@ -3,11 +3,10 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
|
3
3
|
import type { SyncBlockDataProvider } from '@atlaskit/editor-common/sync-block';
|
|
4
4
|
import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
|
|
6
|
+
import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
6
7
|
import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
|
|
7
8
|
export type SyncedBlockEditorProps = {
|
|
8
|
-
boundariesElement: HTMLElement;
|
|
9
9
|
defaultDocument: JSONDocNode;
|
|
10
|
-
mountPoint: HTMLElement;
|
|
11
10
|
onChange: (editorView: EditorView, meta: {
|
|
12
11
|
/**
|
|
13
12
|
* Indicates whether or not the change may be unnecessary to listen to (dirty
|
|
@@ -25,6 +24,8 @@ export type SyncedBlockEditorProps = {
|
|
|
25
24
|
editorView: EditorView;
|
|
26
25
|
eventDispatcher: EventDispatcher;
|
|
27
26
|
}) => void;
|
|
27
|
+
popupsBoundariesElement: HTMLElement;
|
|
28
|
+
popupsMountPoint: HTMLElement;
|
|
28
29
|
};
|
|
29
30
|
export type SyncedBlockRendererProps = {
|
|
30
31
|
docNode: DocNode;
|
|
@@ -35,5 +36,6 @@ export type SyncedBlockPluginOptions = {
|
|
|
35
36
|
getSyncedBlockRenderer?: (props: SyncedBlockRendererProps) => React.JSX.Element;
|
|
36
37
|
};
|
|
37
38
|
export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
|
|
39
|
+
dependencies: [SelectionPlugin];
|
|
38
40
|
pluginConfiguration: SyncedBlockPluginOptions | undefined;
|
|
39
41
|
}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
|
|
3
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { SyncedBlockEditorProps } from '../syncedBlockPluginType';
|
|
6
|
+
type Props = {
|
|
7
|
+
defaultDocument: JSONDocNode;
|
|
8
|
+
getSyncedBlockEditor: (props: SyncedBlockEditorProps) => React.JSX.Element;
|
|
9
|
+
handleContentChanges: (updatedDoc: PMNode) => void;
|
|
10
|
+
popupsBoundariesElement: HTMLElement;
|
|
11
|
+
popupsMountPoint: HTMLElement;
|
|
12
|
+
setInnerEditorView: (editorView: EditorView) => void;
|
|
13
|
+
};
|
|
14
|
+
export declare const SyncBlockEditorWrapperDataId = "sync-block-plugin-editor-wrapper";
|
|
15
|
+
export declare const SyncBlockEditorWrapper: React.MemoExoticComponent<({ defaultDocument, getSyncedBlockEditor, popupsBoundariesElement, popupsMountPoint, setInnerEditorView, handleContentChanges, }: Props) => React.JSX.Element>;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DocNode } from '@atlaskit/adf-schema';
|
|
3
|
+
import type { SyncedBlockRendererProps } from '../syncedBlockPluginType';
|
|
4
|
+
type Props = {
|
|
5
|
+
docNode: DocNode;
|
|
6
|
+
getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
|
|
7
|
+
};
|
|
8
|
+
export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ getSyncedBlockRenderer, docNode }: Props) => React.JSX.Element>;
|
|
9
|
+
export {};
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { IntlShape } from 'react-intl-next';
|
|
2
|
+
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
|
+
import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { EditorState } from '@atlaskit/editor-prosemirror/dist/types/state';
|
|
5
|
+
import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
6
|
+
export declare const getToolbarConfig: (state: EditorState, _intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory) => FloatingToolbarConfig | undefined;
|
|
@@ -1,28 +1,42 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
2
|
+
import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
3
|
+
import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
|
|
4
|
+
import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
|
|
5
|
+
import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
|
|
6
|
+
import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
|
|
5
7
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
6
8
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
7
|
-
import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
8
|
-
export
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
10
|
+
export interface SyncBlockNodeViewProps extends ReactComponentProps {
|
|
11
|
+
api?: ExtractInjectionAPI<SyncedBlockPlugin>;
|
|
12
|
+
eventDispatcher: EventDispatcher;
|
|
13
|
+
getPos: getPosHandler;
|
|
14
|
+
isNodeNested?: boolean;
|
|
15
|
+
node: PMNode;
|
|
16
|
+
options: SyncedBlockPluginOptions | undefined;
|
|
17
|
+
portalProviderAPI: PortalProviderAPI;
|
|
18
|
+
view: EditorView;
|
|
19
|
+
}
|
|
16
20
|
declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
|
|
21
|
+
private isSource;
|
|
22
|
+
private options;
|
|
23
|
+
constructor(props: SyncBlockNodeViewProps);
|
|
17
24
|
unsubscribe: (() => void) | undefined;
|
|
18
25
|
createDomRef(): HTMLElement;
|
|
19
|
-
|
|
26
|
+
private handleContentChanges;
|
|
27
|
+
private setInnerEditorView;
|
|
28
|
+
private renderEditor;
|
|
29
|
+
private renderRenderer;
|
|
30
|
+
render(): React.JSX.Element | null;
|
|
20
31
|
stopEvent(event: Event): boolean;
|
|
32
|
+
selectNode(): void;
|
|
21
33
|
destroy(): void;
|
|
34
|
+
private selectSyncBlockNode;
|
|
22
35
|
}
|
|
23
36
|
export interface SyncBlockNodeViewProperties {
|
|
24
|
-
|
|
37
|
+
api?: ExtractInjectionAPI<SyncedBlockPlugin>;
|
|
38
|
+
options: SyncedBlockPluginOptions | undefined;
|
|
25
39
|
pmPluginFactoryParams: PMPluginFactoryParams;
|
|
26
40
|
}
|
|
27
|
-
export declare const syncBlockNodeView: ({
|
|
41
|
+
export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
|
|
28
42
|
export {};
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Command } from '@atlaskit/editor-common/types';
|
|
2
|
+
import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
2
3
|
export declare const createSyncedBlock: (state: EditorState) => Transaction;
|
|
4
|
+
export declare const copySyncedBlockReferenceToClipboard: Command;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
2
|
import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
|
|
3
|
-
import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
5
|
-
import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
5
|
+
import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
6
6
|
export declare const syncedBlockPluginKey: PluginKey<any>;
|
|
7
7
|
type SyncedBlockPluginState = {};
|
|
8
|
-
export declare const createPlugin: (
|
|
8
|
+
export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, _syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
|
|
9
9
|
export {};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
|
|
2
|
+
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
+
export declare const findSyncBlock: (state: EditorState, selection?: Selection | null) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;
|
|
@@ -3,11 +3,10 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
|
|
|
3
3
|
import type { SyncBlockDataProvider } from '@atlaskit/editor-common/sync-block';
|
|
4
4
|
import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
|
|
5
5
|
import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
|
|
6
|
+
import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
6
7
|
import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
|
|
7
8
|
export type SyncedBlockEditorProps = {
|
|
8
|
-
boundariesElement: HTMLElement;
|
|
9
9
|
defaultDocument: JSONDocNode;
|
|
10
|
-
mountPoint: HTMLElement;
|
|
11
10
|
onChange: (editorView: EditorView, meta: {
|
|
12
11
|
/**
|
|
13
12
|
* Indicates whether or not the change may be unnecessary to listen to (dirty
|
|
@@ -25,6 +24,8 @@ export type SyncedBlockEditorProps = {
|
|
|
25
24
|
editorView: EditorView;
|
|
26
25
|
eventDispatcher: EventDispatcher;
|
|
27
26
|
}) => void;
|
|
27
|
+
popupsBoundariesElement: HTMLElement;
|
|
28
|
+
popupsMountPoint: HTMLElement;
|
|
28
29
|
};
|
|
29
30
|
export type SyncedBlockRendererProps = {
|
|
30
31
|
docNode: DocNode;
|
|
@@ -35,5 +36,8 @@ export type SyncedBlockPluginOptions = {
|
|
|
35
36
|
getSyncedBlockRenderer?: (props: SyncedBlockRendererProps) => React.JSX.Element;
|
|
36
37
|
};
|
|
37
38
|
export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
|
|
39
|
+
dependencies: [
|
|
40
|
+
SelectionPlugin
|
|
41
|
+
];
|
|
38
42
|
pluginConfiguration: SyncedBlockPluginOptions | undefined;
|
|
39
43
|
}>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
|
|
3
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { SyncedBlockEditorProps } from '../syncedBlockPluginType';
|
|
6
|
+
type Props = {
|
|
7
|
+
defaultDocument: JSONDocNode;
|
|
8
|
+
getSyncedBlockEditor: (props: SyncedBlockEditorProps) => React.JSX.Element;
|
|
9
|
+
handleContentChanges: (updatedDoc: PMNode) => void;
|
|
10
|
+
popupsBoundariesElement: HTMLElement;
|
|
11
|
+
popupsMountPoint: HTMLElement;
|
|
12
|
+
setInnerEditorView: (editorView: EditorView) => void;
|
|
13
|
+
};
|
|
14
|
+
export declare const SyncBlockEditorWrapperDataId = "sync-block-plugin-editor-wrapper";
|
|
15
|
+
export declare const SyncBlockEditorWrapper: React.MemoExoticComponent<({ defaultDocument, getSyncedBlockEditor, popupsBoundariesElement, popupsMountPoint, setInnerEditorView, handleContentChanges, }: Props) => React.JSX.Element>;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DocNode } from '@atlaskit/adf-schema';
|
|
3
|
+
import type { SyncedBlockRendererProps } from '../syncedBlockPluginType';
|
|
4
|
+
type Props = {
|
|
5
|
+
docNode: DocNode;
|
|
6
|
+
getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
|
|
7
|
+
};
|
|
8
|
+
export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ getSyncedBlockRenderer, docNode }: Props) => React.JSX.Element>;
|
|
9
|
+
export {};
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { IntlShape } from 'react-intl-next';
|
|
2
|
+
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
3
|
+
import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
|
|
4
|
+
import type { EditorState } from '@atlaskit/editor-prosemirror/dist/types/state';
|
|
5
|
+
import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
|
|
6
|
+
export declare const getToolbarConfig: (state: EditorState, _intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory) => FloatingToolbarConfig | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-synced-block",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"description": "SyncedBlock plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -29,13 +29,15 @@
|
|
|
29
29
|
"atlaskit:src": "src/index.ts",
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/adf-schema": "^51.1.2",
|
|
32
|
+
"@atlaskit/editor-plugin-selection": "^5.0.0",
|
|
32
33
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
33
|
-
"@atlaskit/icon": "28.2.
|
|
34
|
+
"@atlaskit/icon": "28.2.1",
|
|
34
35
|
"@babel/runtime": "^7.0.0",
|
|
35
|
-
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
36
|
+
"react-intl-next": "npm:react-intl@^5.18.1",
|
|
37
|
+
"uuid": "^3.1.0"
|
|
36
38
|
},
|
|
37
39
|
"peerDependencies": {
|
|
38
|
-
"@atlaskit/editor-common": "^109.
|
|
40
|
+
"@atlaskit/editor-common": "^109.10.0",
|
|
39
41
|
"react": "^18.2.0"
|
|
40
42
|
},
|
|
41
43
|
"devDependencies": {
|