@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
139 lines (135 loc) • 6.91 kB
JavaScript
import React from 'react';
import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { SyncBlockLabel } from '../ui/SyncBlockLabel';
import { isEmptySourceSyncBlock } from './isEmptySourceSyncBlock';
const toDOM = node => ['div', {
class: `${BodiedSyncBlockSharedCssClassName.prefix} bodiedSyncBlockView-content-wrap`,
localid: node.attrs.localId,
resourceid: node.attrs.resourceId
}, ['div', {
class: BodiedSyncBlockSharedCssClassName.content,
contenteditable: 'true'
}, 0]];
export class BodiedSyncBlock {
constructor(node, view, getPos, api, nodeViewPortalProviderAPI) {
this.node = node;
this.view = view;
this.getPos = getPos;
this.api = api;
this.nodeViewPortalProviderAPI = nodeViewPortalProviderAPI;
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView serialization must target active runtime document
const {
dom,
contentDOM
} = DOMSerializer.renderSpec(document, toDOM(this.node));
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.dom = dom;
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.contentDOM = contentDOM;
// Render the label into a separate container so portal implementations that
// write directly into the target do not clobber contentDOM. This also covers
// SSR, where the portal's renderToStaticMarkup + innerHTML would clobber it.
// eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
const labelContainer = document.createElement('div');
this.dom.appendChild(labelContainer);
this.labelKey = crypto.randomUUID();
this.nodeViewPortalProviderAPI.render(() => {
var _this$api, _this$api$analytics;
return /*#__PURE__*/React.createElement(ErrorBoundary, {
component: ACTION_SUBJECT.SYNCED_BLOCK,
componentId: ACTION_SUBJECT_ID.SYNCED_BLOCK_LABEL,
dispatchAnalyticsEvent: (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$analytics = _this$api.analytics) === null || _this$api$analytics === void 0 ? void 0 : _this$api$analytics.actions.fireAnalyticsEvent,
fallbackComponent: null
}, /*#__PURE__*/React.createElement(SyncBlockLabel, {
isSource: true,
localId: node.attrs.localId
}));
}, labelContainer, this.labelKey);
this.updateContentEditable({});
this.updateEmptyClass();
this.handleConnectivityModeChange();
this.handleViewModeChange();
// Cache is populated in state.init() and updated in appendTransaction,
// so no additional updateSyncBlockData call is needed here.
}
updateContentEditable({
nextConnectivityMode,
nextViewMode
}) {
var _this$api2, _this$api2$connectivi, _this$api2$connectivi2, _this$api2$connectivi3, _this$api3, _this$api3$editorView, _this$api3$editorView2, _this$api3$editorView3;
const connectivityMode = nextConnectivityMode !== null && nextConnectivityMode !== void 0 ? nextConnectivityMode : (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$connectivi = _this$api2.connectivity) === null || _this$api2$connectivi === void 0 ? void 0 : (_this$api2$connectivi2 = _this$api2$connectivi.sharedState) === null || _this$api2$connectivi2 === void 0 ? void 0 : (_this$api2$connectivi3 = _this$api2$connectivi2.currentState()) === null || _this$api2$connectivi3 === void 0 ? void 0 : _this$api2$connectivi3.mode;
const viewMode = nextViewMode !== null && nextViewMode !== void 0 ? nextViewMode : (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$editorView = _this$api3.editorViewMode) === null || _this$api3$editorView === void 0 ? void 0 : (_this$api3$editorView2 = _this$api3$editorView.sharedState) === null || _this$api3$editorView2 === void 0 ? void 0 : (_this$api3$editorView3 = _this$api3$editorView2.currentState()) === null || _this$api3$editorView3 === void 0 ? void 0 : _this$api3$editorView3.mode;
const isOnline = !isOfflineMode(connectivityMode);
const isEditMode = viewMode !== 'view';
const shouldBeEditable = isOnline && isEditMode;
this.contentDOM.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
}
handleConnectivityModeChange() {
var _this$api4;
if ((_this$api4 = this.api) !== null && _this$api4 !== void 0 && _this$api4.connectivity) {
this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(({
nextSharedState
}) => {
this.updateContentEditable({
nextConnectivityMode: nextSharedState.mode
});
});
}
}
handleViewModeChange() {
var _this$api5;
if ((_this$api5 = this.api) !== null && _this$api5 !== void 0 && _this$api5.editorViewMode) {
this.cleanupViewModeListener = this.api.editorViewMode.sharedState.onChange(({
nextSharedState
}) => {
this.updateContentEditable({
nextViewMode: nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode
});
});
}
}
/**
* Marks the block as empty so the source placeholder can be shown purely from document state.
* See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
*/
updateEmptyClass() {
this.dom.classList.toggle(BodiedSyncBlockSharedCssClassName.empty, isEmptySourceSyncBlock(this.node));
}
update(node) {
if (this.node.type !== node.type) {
return false;
}
// Cache updates are handled in appendTransaction where we can
// filter out non-user changes (remote collab, table auto-scale, etc.)
this.node = node;
this.updateEmptyClass();
return true;
}
ignoreMutation(mutation) {
if (mutation.type === 'selection') {
return false;
}
return true;
}
destroy() {
var _this$cleanupConnecti, _this$cleanupViewMode;
(_this$cleanupConnecti = this.cleanupConnectivityModeListener) === null || _this$cleanupConnecti === void 0 ? void 0 : _this$cleanupConnecti.call(this);
(_this$cleanupViewMode = this.cleanupViewModeListener) === null || _this$cleanupViewMode === void 0 ? void 0 : _this$cleanupViewMode.call(this);
this.nodeViewPortalProviderAPI.remove(this.labelKey);
}
}
export const bodiedSyncBlockNodeView = props => {
const {
api,
pmPluginFactoryParams: {
nodeViewPortalProviderAPI
}
} = props;
return (node, view, getPos) => {
return new BodiedSyncBlock(node, view, getPos, api, nodeViewPortalProviderAPI);
};
};