@cyberyozh/text-editor 0.1.12 → 0.1.13
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/dist/editor.d.mts +4 -1
- package/dist/editor.d.ts +4 -1
- package/dist/editor.js +78 -5
- package/dist/editor.js.map +1 -1
- package/dist/editor.mjs +76 -4
- package/dist/editor.mjs.map +1 -1
- package/dist/render.d.mts +4 -1
- package/dist/render.d.ts +4 -1
- package/dist/render.js +35 -2
- package/dist/render.js.map +1 -1
- package/dist/render.mjs +33 -1
- package/dist/render.mjs.map +1 -1
- package/package.json +1 -1
- package/src/editor/dialogs/image-dialog/image-dialog.tsx +33 -2
- package/src/editor/editor.tsx +2 -2
- package/src/editor/index.ts +1 -0
- package/src/extensions/editor/figure.ts +20 -1
- package/src/render/index.ts +1 -0
- package/src/utils/html-to-tiptap-content.ts +41 -0
package/dist/editor.mjs
CHANGED
|
@@ -1892,14 +1892,39 @@ var ImageDialog = ({
|
|
|
1892
1892
|
const [dragActive, setDragActive] = useState6(false);
|
|
1893
1893
|
const inputRef = useRef6(null);
|
|
1894
1894
|
const resolvedInitialUrl = initialAttrs ? resolveImageSrc({ fileId: initialAttrs.fileId, src: initialAttrs.src }, { getImageById }) : "";
|
|
1895
|
+
const getConstrainedDimensions = () => {
|
|
1896
|
+
if (!initialAttrs?.width || !initialAttrs?.height) {
|
|
1897
|
+
return { width: 0, height: 0 };
|
|
1898
|
+
}
|
|
1899
|
+
let maxWidth;
|
|
1900
|
+
try {
|
|
1901
|
+
const editorElement = document.querySelector(".tiptap-content-wrapper");
|
|
1902
|
+
if (editorElement && editorElement.clientWidth > 0) {
|
|
1903
|
+
maxWidth = editorElement.clientWidth - 32;
|
|
1904
|
+
}
|
|
1905
|
+
} catch {
|
|
1906
|
+
}
|
|
1907
|
+
if (maxWidth && initialAttrs.width > maxWidth) {
|
|
1908
|
+
const aspectRatio = initialAttrs.height / initialAttrs.width;
|
|
1909
|
+
return {
|
|
1910
|
+
width: maxWidth,
|
|
1911
|
+
height: Math.round(maxWidth * aspectRatio)
|
|
1912
|
+
};
|
|
1913
|
+
}
|
|
1914
|
+
return {
|
|
1915
|
+
width: initialAttrs.width,
|
|
1916
|
+
height: initialAttrs.height
|
|
1917
|
+
};
|
|
1918
|
+
};
|
|
1919
|
+
const constrainedDimensions = getConstrainedDimensions();
|
|
1895
1920
|
const [formState, setFormState] = useState6({
|
|
1896
1921
|
file: null,
|
|
1897
1922
|
title: initialAttrs?.title || "",
|
|
1898
1923
|
alt: initialAttrs?.alt || "",
|
|
1899
1924
|
caption: initialAttrs?.caption || "",
|
|
1900
1925
|
fileUrl: resolvedInitialUrl,
|
|
1901
|
-
width:
|
|
1902
|
-
height:
|
|
1926
|
+
width: constrainedDimensions.width,
|
|
1927
|
+
height: constrainedDimensions.height
|
|
1903
1928
|
});
|
|
1904
1929
|
const handleSelectFile = (file) => {
|
|
1905
1930
|
if (!file) return;
|
|
@@ -2002,7 +2027,9 @@ var ImageDialog = ({
|
|
|
2002
2027
|
onImageEdit({
|
|
2003
2028
|
alt: formState.alt,
|
|
2004
2029
|
title: formState.title,
|
|
2005
|
-
caption: formState.caption
|
|
2030
|
+
caption: formState.caption,
|
|
2031
|
+
width: formState.width || void 0,
|
|
2032
|
+
height: formState.height || void 0
|
|
2006
2033
|
});
|
|
2007
2034
|
handleClose();
|
|
2008
2035
|
};
|
|
@@ -5215,6 +5242,19 @@ var Figure2 = BaseFigure.extend({
|
|
|
5215
5242
|
if (maxWidth && naturalAspectRatio) {
|
|
5216
5243
|
maxHeight = Math.round(maxWidth * naturalAspectRatio);
|
|
5217
5244
|
}
|
|
5245
|
+
if (attrs.width && attrs.height && maxWidth && attrs.width > maxWidth) {
|
|
5246
|
+
const width = maxWidth;
|
|
5247
|
+
const height = Math.round(attrs.height / attrs.width * maxWidth);
|
|
5248
|
+
imageContainer.style.width = `${width}px`;
|
|
5249
|
+
imageContainer.style.height = `${height}px`;
|
|
5250
|
+
const pos = getPos();
|
|
5251
|
+
if (typeof pos === "number") {
|
|
5252
|
+
editor.chain().updateAttributes("image", {
|
|
5253
|
+
width: Math.round(width),
|
|
5254
|
+
height: Math.round(height)
|
|
5255
|
+
}).run();
|
|
5256
|
+
}
|
|
5257
|
+
}
|
|
5218
5258
|
};
|
|
5219
5259
|
imageContainer.appendChild(img);
|
|
5220
5260
|
if (editor.isEditable) {
|
|
@@ -6424,7 +6464,39 @@ var Tiptap = (props) => {
|
|
|
6424
6464
|
const translations2 = getTranslations(lang);
|
|
6425
6465
|
return /* @__PURE__ */ jsx92(TiptapTranslationsProvider, { translations: translations2, children: /* @__PURE__ */ jsx92(DialogCommandProvider, { children: /* @__PURE__ */ jsx92(TiptapContent, { ...props }) }) });
|
|
6426
6466
|
};
|
|
6467
|
+
|
|
6468
|
+
// src/utils/html-to-tiptap-content.ts
|
|
6469
|
+
import { generateJSON } from "@tiptap/core";
|
|
6470
|
+
function isJSONContent(value) {
|
|
6471
|
+
return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string";
|
|
6472
|
+
}
|
|
6473
|
+
function htmlToTiptapContent(content) {
|
|
6474
|
+
if (isJSONContent(content)) {
|
|
6475
|
+
return content;
|
|
6476
|
+
}
|
|
6477
|
+
if (typeof content === "string") {
|
|
6478
|
+
try {
|
|
6479
|
+
const parsed = JSON.parse(content);
|
|
6480
|
+
if (isJSONContent(parsed)) {
|
|
6481
|
+
return parsed;
|
|
6482
|
+
}
|
|
6483
|
+
} catch {
|
|
6484
|
+
}
|
|
6485
|
+
}
|
|
6486
|
+
if (!content || content.trim() === "") {
|
|
6487
|
+
return { type: "doc", content: [{ type: "paragraph" }] };
|
|
6488
|
+
}
|
|
6489
|
+
const sharedExtensions = getSharedExtensions();
|
|
6490
|
+
const extensions = [...sharedExtensions, BaseFigure];
|
|
6491
|
+
try {
|
|
6492
|
+
return generateJSON(content, extensions);
|
|
6493
|
+
} catch (error) {
|
|
6494
|
+
console.error("Failed to convert HTML to Tiptap content:", error);
|
|
6495
|
+
return { type: "doc", content: [{ type: "paragraph" }] };
|
|
6496
|
+
}
|
|
6497
|
+
}
|
|
6427
6498
|
export {
|
|
6428
|
-
Tiptap
|
|
6499
|
+
Tiptap,
|
|
6500
|
+
htmlToTiptapContent
|
|
6429
6501
|
};
|
|
6430
6502
|
//# sourceMappingURL=editor.mjs.map
|