phx-react
Version:
PHX REACT
261 lines • 9.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InlineImageNode = void 0;
exports.$createInlineImageNode = $createInlineImageNode;
exports.$isInlineImageNode = $isInlineImageNode;
const tslib_1 = require("tslib");
const lexical_1 = require("lexical");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const InlineImageComponent = React.lazy(() => Promise.resolve().then(() => tslib_1.__importStar(require('./InlineImageComponent'))));
/**
* Gets the inline image position encoded in a wrapper class name.
* @param className Wrapper class name to inspect.
* @returns Matching inline image position, or undefined when no position class exists.
*/
function getPositionFromClassName(className) {
if (className.includes('position-left')) {
return 'left';
}
if (className.includes('position-right')) {
return 'right';
}
if (className.includes('position-full')) {
return 'full';
}
if (className.includes('position-center')) {
return 'center';
}
return undefined;
}
/**
* Converts an imported DOM image element into an InlineImageNode.
* @param domNode DOM node provided by Lexical import.
* @returns DOM conversion output for inline image nodes, or null for unsupported nodes.
*/
function convertInlineImageElement(domNode) {
var _a;
if (domNode instanceof HTMLImageElement) {
const { alt: altText, height, src, width } = domNode;
const position = getPositionFromClassName(((_a = domNode.parentElement) === null || _a === void 0 ? void 0 : _a.className) || '');
const node = $createInlineImageNode({ altText, height, position, src, width });
return { node };
}
return null;
}
class InlineImageNode extends lexical_1.DecoratorNode {
/**
* Gets the Lexical node type for inline image nodes.
* @returns Inline image node type.
*/
static getType() {
return 'inline-image';
}
/**
* Clones an existing inline image node.
* @param node Inline image node to clone.
* @returns Cloned inline image node.
*/
static clone(node) {
return new InlineImageNode(node.__src, node.__altText, node.__position, node.__width, node.__height, node.__showCaption, node.__caption, node.__key);
}
/**
* Imports a serialized inline image node into the editor state.
* @param serializedNode Serialized inline image node payload.
* @returns Hydrated inline image node.
*/
static importJSON(serializedNode) {
const { altText, caption, height, position, showCaption, src, width } = serializedNode;
const node = $createInlineImageNode({
altText,
height,
position,
showCaption,
src,
width,
});
const nestedEditor = node.__caption;
const editorState = nestedEditor.parseEditorState(caption.editorState);
if (!editorState.isEmpty()) {
nestedEditor.setEditorState(editorState);
}
return node;
}
/**
* Defines DOM import conversions for inline image elements.
* @returns DOM conversion map for inline image imports.
*/
static importDOM() {
return {
img: () => ({
conversion: convertInlineImageElement,
priority: 0,
}),
};
}
/**
* Creates an inline image node instance.
* @param src Image source URL.
* @param altText Accessible alt text.
* @param position Inline image alignment position.
* @param width Initial image width.
* @param height Initial image height.
* @param showCaption Whether the caption editor is visible.
* @param caption Nested caption editor.
* @param key Optional Lexical node key.
*/
constructor(src, altText, position, width, height, showCaption, caption, key) {
super(key);
this.__src = src;
this.__altText = altText;
this.__width = width || 'inherit';
this.__height = height || 'inherit';
this.__showCaption = showCaption || false;
this.__caption = caption || (0, lexical_1.createEditor)();
this.__position = position;
}
/**
* Exports this inline image node to DOM.
* @returns DOM export output containing the inline image wrapper.
*/
exportDOM() {
const wrapper = document.createElement('span');
wrapper.className = `inline-editor-image position-${this.__position || 'center'}`;
const element = document.createElement('img');
element.setAttribute('src', this.__src);
element.setAttribute('alt', this.__altText);
element.setAttribute('width', this.__width.toString());
element.setAttribute('height', this.__height.toString());
wrapper.appendChild(element);
return { element: wrapper };
}
/**
* Serializes this inline image node.
* @returns Serialized inline image node payload.
*/
exportJSON() {
return {
altText: this.getAltText(),
caption: this.__caption.toJSON(),
height: this.__height === 'inherit' ? 0 : this.__height,
position: this.__position,
showCaption: this.__showCaption,
src: this.getSrc(),
type: 'inline-image',
version: 1,
width: this.__width === 'inherit' ? 0 : this.__width,
};
}
/**
* Gets the image source URL.
* @returns Image source URL.
*/
getSrc() {
return this.__src;
}
/**
* Gets the image alt text.
* @returns Image alt text.
*/
getAltText() {
return this.__altText;
}
/**
* Gets whether the caption editor is visible.
* @returns True when caption is shown.
*/
getShowCaption() {
return this.__showCaption;
}
/**
* Gets the current inline image alignment position.
* @returns Current inline image position.
*/
getPosition() {
return this.__position;
}
/**
* Updates the stored image dimensions.
* @param width Next image width.
* @param height Next image height.
*/
setWidthAndHeight(width, height) {
const writable = this.getWritable();
writable.__width = width;
writable.__height = height;
}
/**
* Updates mutable inline image fields.
* @param payload Partial inline image update payload.
*/
update(payload) {
const writable = this.getWritable();
const { altText, position, showCaption } = payload;
if (altText !== undefined) {
writable.__altText = altText;
}
if (showCaption !== undefined) {
writable.__showCaption = showCaption;
}
if (position !== undefined) {
writable.__position = position;
}
}
// View
/**
* Creates the DOM wrapper for this inline image node.
* @param config Lexical editor config.
* @returns Inline image wrapper element.
*/
createDOM(config) {
const span = document.createElement('span');
const className = `${config.theme.inlineImage} position-${this.__position || 'center'}`;
if (className !== undefined) {
span.className = className;
}
return span;
}
/**
* Updates the DOM wrapper when node state changes.
* @param prevNode Previous inline image node state.
* @param dom Existing inline image wrapper element.
* @param config Lexical editor config.
* @returns False because the existing DOM element is reused.
*/
updateDOM(prevNode, dom, config) {
const position = this.__position;
if (position !== prevNode.__position) {
const className = `${config.theme.inlineImage} position-${position || 'center'}`;
if (className !== undefined) {
dom.className = className;
}
}
return false;
}
/**
* Renders the React decorator for this inline image node.
* @returns Inline image decorator element.
*/
decorate() {
return (React.createElement(react_1.Suspense, { fallback: null },
React.createElement(InlineImageComponent, { altText: this.__altText, caption: this.__caption, height: this.__height, nodeKey: this.getKey(), position: this.__position, showCaption: this.__showCaption, src: this.__src, width: this.__width })));
}
}
exports.InlineImageNode = InlineImageNode;
/**
* Creates and inserts a replacement inline image node.
* @param payload Inline image node creation payload.
* @returns Created inline image node.
*/
function $createInlineImageNode({ altText, caption, height, key, position, showCaption, src, width, }) {
return (0, lexical_1.$applyNodeReplacement)(new InlineImageNode(src, altText, position || 'center', width, height, showCaption, caption, key));
}
/**
* Checks whether a Lexical node is an InlineImageNode.
* @param node Node to test.
* @returns True when the node is an InlineImageNode.
*/
function $isInlineImageNode(node) {
return node instanceof InlineImageNode;
}
//# sourceMappingURL=InlineImageNode.js.map