+
+ {props?.commentAccess?.map((access) => (
+
+
+
+ ))}
+
{items.map((item, index) => (
- }
- position={position}
- renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
- React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
- }
- />
- );
-};
diff --git a/packages/editor/src/ui/light-editor/plugins/delete-image.tsx b/packages/editor/src/ui/light-editor/plugins/delete-image.tsx
deleted file mode 100644
index 9204481a8..000000000
--- a/packages/editor/src/ui/light-editor/plugins/delete-image.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { DeleteImage } from "@/types/delete-image";
-
-const deleteKey = new PluginKey("delete-image");
-const IMAGE_NODE_TYPE = "image";
-
-interface ImageNode extends ProseMirrorNode {
- attrs: {
- src: string;
- id: string;
- };
-}
-
-const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
- new Plugin({
- key: deleteKey,
- appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
- const newImageSources = new Set();
- newState.doc.descendants((node) => {
- if (node.type.name === IMAGE_NODE_TYPE) {
- newImageSources.add(node.attrs.src);
- }
- });
-
- transactions.forEach((transaction) => {
- if (!transaction.docChanged) return;
-
- const removedImages: ImageNode[] = [];
-
- oldState.doc.descendants((oldNode, oldPos) => {
- if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
- if (oldPos < 0 || oldPos > newState.doc.content.size) return;
- if (!newState.doc.resolve(oldPos).parent) return;
-
- const newNode = newState.doc.nodeAt(oldPos);
-
- // Check if the node has been deleted or replaced
- if (!newNode || newNode.type.name !== IMAGE_NODE_TYPE) {
- if (!newImageSources.has(oldNode.attrs.src)) {
- removedImages.push(oldNode as ImageNode);
- }
- }
- });
-
- removedImages.forEach(async (node) => {
- const src = node.attrs.src;
- await onNodeDeleted(src, deleteImage);
- });
- });
-
- return null;
- },
- });
-
-export default TrackImageDeletionPlugin;
-
-async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise
{
- try {
- const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
- const resStatus = await deleteImage(assetUrlWithWorkspaceId);
- if (resStatus === 204) {
- console.log("Image deleted successfully");
- }
- } catch (error) {
- console.error("Error deleting image: ", error);
- }
-}
diff --git a/packages/editor/src/ui/light-editor/plugins/upload-image.tsx b/packages/editor/src/ui/light-editor/plugins/upload-image.tsx
deleted file mode 100644
index 4c3bbf9a8..000000000
--- a/packages/editor/src/ui/light-editor/plugins/upload-image.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { UploadImage } from "@/types/upload-image";
-import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
-
-const uploadKey = new PluginKey("upload-image");
-
-const UploadImagesPlugin = () =>
- new Plugin({
- key: uploadKey,
- state: {
- init() {
- return DecorationSet.empty;
- },
- apply(tr, set) {
- set = set.map(tr.mapping, tr.doc);
- // See if the transaction adds or removes any placeholders
- const action = tr.getMeta(uploadKey);
- if (action && action.add) {
- const { id, pos, src } = action.add;
-
- const placeholder = document.createElement("div");
- placeholder.setAttribute("class", "img-placeholder");
- const image = document.createElement("img");
- image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
- image.src = src;
- placeholder.appendChild(image);
- const deco = Decoration.widget(pos + 1, placeholder, {
- id,
- });
- set = set.add(tr.doc, [deco]);
- } else if (action && action.remove) {
- set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
- }
- return set;
- },
- },
- props: {
- decorations(state) {
- return this.getState(state);
- },
- },
- });
-
-export default UploadImagesPlugin;
-
-function findPlaceholder(state: EditorState, id: {}) {
- const decos = uploadKey.getState(state);
- const found = decos.find(
- undefined,
- undefined,
- (spec: { id: number | undefined }) => spec.id == id
- );
- return found.length ? found[0].from : null;
-}
-
-export async function startImageUpload(
- file: File,
- view: EditorView,
- pos: number,
- workspaceSlug: string,
- uploadFile: UploadImage,
- setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-) {
- if (!file.type.includes("image/")) {
- return;
- }
-
- const id = {};
-
- const tr = view.state.tr;
- if (!tr.selection.empty) tr.deleteSelection();
-
- const reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onload = () => {
- tr.setMeta(uploadKey, {
- add: {
- id,
- pos,
- src: reader.result,
- },
- });
- view.dispatch(tr);
- };
-
- if (!workspaceSlug) {
- return;
- }
- setIsSubmitting?.("submitting");
- const src = await UploadImageHandler(file, workspaceSlug, uploadFile);
- const { schema } = view.state;
- pos = findPlaceholder(view.state, id);
-
- if (pos == null) return;
- const imageSrc = typeof src === "object" ? reader.result : src;
-
- const node = schema.nodes.image.create({ src: imageSrc });
- const transaction = view.state.tr
- .replaceWith(pos, pos, node)
- .setMeta(uploadKey, { remove: { id } });
- view.dispatch(transaction);
-}
-
-const UploadImageHandler = (file: File, workspaceSlug: string,
- uploadFile: UploadImage
-): Promise => {
- if (!workspaceSlug) {
- return Promise.reject("Workspace slug is missing");
- }
- try {
- const formData = new FormData();
- formData.append("asset", file);
- formData.append("attributes", JSON.stringify({}));
-
- return new Promise(async (resolve, reject) => {
- try {
- const imageUrl = await uploadFile(workspaceSlug, formData)
- .then((response: { asset: string }) => response.asset);
-
- const image = new Image();
- image.src = imageUrl;
- image.onload = () => {
- resolve(imageUrl);
- };
- } catch (error) {
- if (error instanceof Error) {
- console.log(error.message);
- }
- reject(error);
- }
- });
- } catch (error) {
- if (error instanceof Error) {
- console.log(error.message);
- }
- return Promise.reject(error);
- }
-};
diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
index 78b38e1d3..76a45faa4 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -22,7 +22,12 @@ type Props = {
showAccessSpecifier?: boolean;
};
-const commentAccess = [
+type commentAccessType = {
+ icon: string;
+ key: string;
+ label: "Private" | "Public";
+}
+const commentAccess: commentAccessType[] = [
{
icon: "lock",
key: "INTERNAL",
@@ -67,51 +72,30 @@ export const AddComment: React.FC = ({
(
- " : value}
- customClassName="p-3 min-h-[100px] shadow-sm"
- debouncedUpdatesEnabled={false}
- onChange={(comment_json: Object, comment_html: string) => onChange(comment_html)}
+ render={({ field: { onChange, value } }) => (
+ (
+ " : commentValue}
+ customClassName="p-3 min-h-[100px] shadow-sm"
+ debouncedUpdatesEnabled={false}
+ onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)}
+ accessValue={value}
+ onAccessChange={onChange}
+ commentAccess={commentAccess}
+ />
+ )}
/>
)}
/>
- {showAccessSpecifier && (
-
-
(
-
- {commentAccess.map((access) => (
-
-
-
- ))}
-
- )}
- />
-
diff --git a/yarn.lock b/yarn.lock
index 9ec69da91..d92d076bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2808,7 +2808,7 @@
dependencies:
"@types/react" "*"
-"@types/react@*", "@types/react@^18.0.17":
+"@types/react@*", "@types/react@18.0.15", "@types/react@18.0.28", "@types/react@18.2.0", "@types/react@^18.0.17":
version "18.2.0"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21"
integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==
@@ -2817,24 +2817,6 @@
"@types/scheduler" "*"
csstype "^3.0.2"
-"@types/react@18.0.15":
- version "18.0.15"
- resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
- integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
- dependencies:
- "@types/prop-types" "*"
- "@types/scheduler" "*"
- csstype "^3.0.2"
-
-"@types/react@18.0.28":
- version "18.0.28"
- resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065"
- integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==
- dependencies:
- "@types/prop-types" "*"
- "@types/scheduler" "*"
- csstype "^3.0.2"
-
"@types/reactcss@*":
version "1.2.6"
resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"