binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revert "[WEB-1435] dev: conflict free issue descriptions (#5912)" (#6000)

Browse source 
This reverts commit e9680cab74.
This commit is contained in:
Aaryan Khandelwal 2024-11-15 17:13:31 +05:30 • committed by GitHub
parent e9680cab74
commit 9408e92e44
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
65 changed files with 361 additions and 1469 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apiserver/plane/app/serializers/draft.py
View file

@ -284,11 +284,9 @@ class DraftIssueSerializer(BaseSerializer):
class DraftIssueDetailSerializer(DraftIssueSerializer):
description_html = serializers.CharField()
description_binary = serializers.CharField()
class Meta(DraftIssueSerializer.Meta):
fields = DraftIssueSerializer.Meta.fields + [
"description_html",
"description_binary",
]
read_only_fields = fields

20
apiserver/plane/app/serializers/issue.py
View file

@ -1,6 +1,3 @@
# Python imports
import base64
# Django imports
from django.utils import timezone
from django.core.validators import URLValidator
@ -735,31 +732,14 @@ class IssueLiteSerializer(DynamicBaseSerializer):
read_only_fields = fields
class Base64BinaryField(serializers.CharField):
def to_representation(self, value):
# Encode the binary data to base64 string for JSON response
if value:
return base64.b64encode(value).decode("utf-8")
return None
def to_internal_value(self, data):
# Decode the base64 string to binary data when saving
try:
return base64.b64decode(data)
except (TypeError, ValueError):
raise serializers.ValidationError("Invalid base64-encoded data")
class IssueDetailSerializer(IssueSerializer):
description_html = serializers.CharField()
description_binary = Base64BinaryField()
is_subscribed = serializers.BooleanField(read_only=True)
class Meta(IssueSerializer.Meta):
fields = IssueSerializer.Meta.fields + [
"description_html",
"is_subscribed",
"description_binary",
]
read_only_fields = fields

1
apiserver/plane/app/serializers/workspace.py
View file

@ -66,7 +66,6 @@ class WorkSpaceMemberSerializer(DynamicBaseSerializer):
class WorkspaceMemberMeSerializer(BaseSerializer):
draft_issue_count = serializers.IntegerField(read_only=True)
class Meta:
model = WorkspaceMember
fields = "__all__"

10
apiserver/plane/app/urls/intake.py
View file

@ -92,14 +92,4 @@ urlpatterns = [
),
name="inbox-issue",
),
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/inbox-issues/<uuid:pk>/description/",
IntakeIssueViewSet.as_view(
{
"get": "retrieve_description",
"post": "update_description",
}
),
name="inbox-issue-description",
),
]

19
apiserver/plane/app/urls/issue.py
View file

@ -66,16 +66,6 @@ urlpatterns = [
),
name="project-issue",
),
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:pk>/description/",
IssueViewSet.as_view(
{
"get": "retrieve_description",
"post": "update_description",
}
),
name="project-issue-description",
),
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/",
LabelViewSet.as_view(
@ -298,15 +288,6 @@ urlpatterns = [
),
name="project-issue-archive-unarchive",
),
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/<uuid:pk>/description/",
IssueArchiveViewSet.as_view(
{
"get": "retrieve_description",
}
),
name="archive-issue-description",
),
## End Issue Archives
## Issue Relation
path(

10
apiserver/plane/app/urls/workspace.py
View file

@ -276,16 +276,6 @@ urlpatterns = [
),
name="workspace-drafts-issues",
),
path(
"workspaces/<str:slug>/draft-issues/<uuid:pk>/description/",
WorkspaceDraftIssueViewSet.as_view(
{
"get": "retrieve_description",
"post": "update_description",
}
),
name="workspace-drafts-issues",
),
path(
"workspaces/<str:slug>/draft-to-issue/<uuid:draft_id>/",
WorkspaceDraftIssueViewSet.as_view({"post": "create_draft_to_issue"}),

86
apiserver/plane/app/views/intake/base.py
View file

@ -1,7 +1,5 @@
# Python imports
import json
import requests
import base64
# Django import
from django.utils import timezone
@ -11,9 +9,6 @@ from django.contrib.postgres.aggregates import ArrayAgg
from django.contrib.postgres.fields import ArrayField
from django.db.models import Value, UUIDField
from django.db.models.functions import Coalesce
from django.http import StreamingHttpResponse
from django.conf import settings
# Third party imports
from rest_framework import status
@ -45,6 +40,7 @@ from plane.bgtasks.issue_activities_task import issue_activity
class IntakeViewSet(BaseViewSet):
serializer_class = IntakeSerializer
model = Intake
@ -93,6 +89,7 @@ class IntakeViewSet(BaseViewSet):
class IntakeIssueViewSet(BaseViewSet):
serializer_class = IntakeIssueSerializer
model = IntakeIssue
@ -643,82 +640,3 @@ class IntakeIssueViewSet(BaseViewSet):
intake_issue.delete()
return Response(status=status.HTTP_204_NO_CONTENT)
@allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
def retrieve_description(self, request, slug, project_id, pk):
issue = Issue.objects.filter(
pk=pk, workspace__slug=slug, project_id=project_id
).first()
if issue is None:
return Response(
{"error": "Issue not found"},
status=404,
)
binary_data = issue.description_binary
def stream_data():
if binary_data:
yield binary_data
else:
yield b""
response = StreamingHttpResponse(
stream_data(), content_type="application/octet-stream"
)
response["Content-Disposition"] = (
'attachment; filename="issue_description.bin"'
)
return response
@allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
def update_description(self, request, slug, project_id, pk):
issue = Issue.objects.get(
workspace__slug=slug, project_id=project_id, pk=pk
)
base64_description = issue.description_binary
# convert to base64 string
if base64_description:
base64_description = base64.b64encode(base64_description).decode(
"utf-8"
)
data = {
"original_document": base64_description,
"updates": request.data.get("description_binary"),
}
base_url = f"{settings.LIVE_BASE_URL}/resolve-document-conflicts/"
try:
response = requests.post(base_url, json=data, headers=None)
except requests.RequestException:
return Response(
{"error": "Failed to connect to the external service"},
status=status.HTTP_502_BAD_GATEWAY,
)
if response.status_code == 200:
issue.description = response.json().get(
"description", issue.description
)
issue.description_html = response.json().get("description_html")
response_description_binary = response.json().get(
"description_binary"
)
issue.description_binary = base64.b64decode(
response_description_binary
)
issue.save()
def stream_data():
if issue.description_binary:
yield issue.description_binary
else:
yield b""
response = StreamingHttpResponse(
stream_data(), content_type="application/octet-stream"
)
response["Content-Disposition"] = (
'attachment; filename="issue_description.bin"'
)
return response
return Response(status=status.HTTP_500_INTERNAL_SERVER_ERROR)

30
apiserver/plane/app/views/issue/archive.py
View file

@ -7,8 +7,6 @@ from django.db.models import F, Func, OuterRef, Q, Prefetch, Exists, Subquery
from django.utils import timezone
from django.utils.decorators import method_decorator
from django.views.decorators.gzip import gzip_page
from django.http import StreamingHttpResponse
# Third Party imports
from rest_framework import status
@ -29,7 +27,7 @@ from plane.db.models import (
IssueLink,
IssueSubscriber,
IssueReaction,
CycleIssue,
CycleIssue
)
from plane.utils.grouper import (
issue_group_values,
@ -329,32 +327,6 @@ class IssueArchiveViewSet(BaseViewSet):
return Response(status=status.HTTP_204_NO_CONTENT)
@allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
def retrieve_description(self, request, slug, project_id, pk):
issue = Issue.objects.filter(
pk=pk, workspace__slug=slug, project_id=project_id
).first()
if issue is None:
return Response(
{"error": "Issue not found"},
status=404,
)
binary_data = issue.description_binary
def stream_data():
if binary_data:
yield binary_data
else:
yield b""
response = StreamingHttpResponse(
stream_data(), content_type="application/octet-stream"
)
response["Content-Disposition"] = (
'attachment; filename="issue_description.bin"'
)
return response
class BulkArchiveIssuesEndpoint(BaseAPIView):
permission_classes = [

82
apiserver/plane/app/views/issue/base.py
View file

@ -1,7 +1,5 @@
# Python imports
import json
import requests
import base64
# Django imports
from django.contrib.postgres.aggregates import ArrayAgg
@ -22,10 +20,8 @@ from django.db.models import (
)
from django.db.models.functions import Coalesce
from django.utils import timezone
from django.http import StreamingHttpResponse
from django.utils.decorators import method_decorator
from django.views.decorators.gzip import gzip_page
from django.conf import settings
# Third Party imports
from rest_framework import status
@ -729,84 +725,6 @@ class IssueViewSet(BaseViewSet):
)
return Response(status=status.HTTP_204_NO_CONTENT)
@allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
def retrieve_description(self, request, slug, project_id, pk):
issue = Issue.issue_objects.filter(
pk=pk, workspace__slug=slug, project_id=project_id
).first()
if issue is None:
return Response(
{"error": "Issue not found"},
status=404,
)
binary_data = issue.description_binary
def stream_data():
if binary_data:
yield binary_data
else:
yield b""
response = StreamingHttpResponse(
stream_data(), content_type="application/octet-stream"
)
response["Content-Disposition"] = (
'attachment; filename="issue_description.bin"'
)
return response
def update_description(self, request, slug, project_id, pk):
issue = Issue.issue_objects.get(
workspace__slug=slug, project_id=project_id, pk=pk
)
base64_description = issue.description_binary
# convert to base64 string
if base64_description:
base64_description = base64.b64encode(base64_description).decode(
"utf-8"
)
data = {
"original_document": base64_description,
"updates": request.data.get("description_binary"),
}
base_url = f"{settings.LIVE_BASE_URL}/resolve-document-conflicts/"
try:
response = requests.post(base_url, json=data, headers=None)
except requests.RequestException:
return Response(
{"error": "Failed to connect to the external service"},
status=status.HTTP_502_BAD_GATEWAY,
)
if response.status_code == 200:
issue.description = response.json().get(
"description", issue.description
)
issue.description_html = response.json().get("description_html")
response_description_binary = response.json().get(
"description_binary"
)
issue.description_binary = base64.b64decode(
response_description_binary
)
issue.save()
def stream_data():
if issue.description_binary:
yield issue.description_binary
else:
yield b""
response = StreamingHttpResponse(
stream_data(), content_type="application/octet-stream"
)
response["Content-Disposition"] = (
'attachment; filename="issue_description.bin"'
)
return response
return Response(status=status.HTTP_500_INTERNAL_SERVER_ERROR)
class IssueUserDisplayPropertyEndpoint(BaseAPIView):
@allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])

79
apiserver/plane/app/views/workspace/draft.py
View file

@ -1,7 +1,5 @@
# Python imports
import json
import requests
import base64
# Django imports
from django.utils import timezone
@ -9,7 +7,6 @@ from django.core import serializers
from django.core.serializers.json import DjangoJSONEncoder
from django.contrib.postgres.aggregates import ArrayAgg
from django.contrib.postgres.fields import ArrayField
from django.http import StreamingHttpResponse
from django.db.models import (
Q,
UUIDField,
@ -20,7 +17,6 @@ from django.db.models import (
from django.db.models.functions import Coalesce
from django.utils.decorators import method_decorator
from django.views.decorators.gzip import gzip_page
from django.conf import settings
# Third Party imports
from rest_framework import status
@ -354,78 +350,3 @@ class WorkspaceDraftIssueViewSet(BaseViewSet):
return Response(serializer.data, status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
def retrieve_description(self, request, slug, pk):
issue = DraftIssue.objects.filter(pk=pk, workspace__slug=slug).first()
if issue is None:
return Response(
{"error": "Issue not found"},
status=404,
)
binary_data = issue.description_binary
def stream_data():
if binary_data:
yield binary_data
else:
yield b""
response = StreamingHttpResponse(
stream_data(), content_type="application/octet-stream"
)
response["Content-Disposition"] = (
'attachment; filename="draft_issue_description.bin"'
)
return response
@allow_permission([ROLE.ADMIN, ROLE.MEMBER])
def update_description(self, request, slug, pk):
issue = DraftIssue.objects.get(workspace__slug=slug, pk=pk)
base64_description = issue.description_binary
# convert to base64 string
if base64_description:
base64_description = base64.b64encode(base64_description).decode(
"utf-8"
)
data = {
"original_document": base64_description,
"updates": request.data.get("description_binary"),
}
base_url = f"{settings.LIVE_BASE_URL}/resolve-document-conflicts/"
try:
response = requests.post(base_url, json=data, headers=None)
except requests.RequestException:
return Response(
{"error": "Failed to connect to the external service"},
status=status.HTTP_502_BAD_GATEWAY,
)
if response.status_code == 200:
issue.description = response.json().get(
"description", issue.description
)
issue.description_html = response.json().get("description_html")
response_description_binary = response.json().get(
"description_binary"
)
issue.description_binary = base64.b64decode(
response_description_binary
)
issue.save()
def stream_data():
if issue.description_binary:
yield issue.description_binary
else:
yield b""
response = StreamingHttpResponse(
stream_data(), content_type="application/octet-stream"
)
response["Content-Disposition"] = (
'attachment; filename="issue_description.bin"'
)
return response
return Response(status=status.HTTP_500_INTERNAL_SERVER_ERROR)

2
apiserver/plane/db/migrations/0085_intake_intakeissue_remove_inboxissue_created_by_and_more.py
View file

@ -1,7 +1,9 @@
# Generated by Django 4.2.15 on 2024-11-06 08:41
from django.conf import settings
from django.db import migrations, models
import django.db.models.deletion
import uuid
class Migration(migrations.Migration):

1
apiserver/plane/settings/common.py
View file

@ -381,7 +381,6 @@ CSRF_FAILURE_VIEW = "plane.authentication.views.common.csrf_failure"
ADMIN_BASE_URL = os.environ.get("ADMIN_BASE_URL", None)
SPACE_BASE_URL = os.environ.get("SPACE_BASE_URL", None)
APP_BASE_URL = os.environ.get("APP_BASE_URL")
LIVE_BASE_URL = os.environ.get("LIVE_BASE_URL")
HARD_DELETE_AFTER_DAYS = int(os.environ.get("HARD_DELETE_AFTER_DAYS", 60))

1
apiserver/plane/space/urls/intake.py
View file

@ -3,6 +3,7 @@ from django.urls import path
from plane.space.views import (
IntakeIssuePublicViewSet,
IssueVotePublicViewSet,
WorkspaceProjectDeployBoardEndpoint,
)

6
live/.prettierignore
View file

@ -1,6 +0,0 @@
.next
.vercel
.tubro
out/
dist/
node_modules/

5
live/.prettierrc
View file

@ -1,5 +0,0 @@
{
"printWidth": 120,
"tabWidth": 2,
"trailingComma": "es5"
}

59
live/src/core/helpers/page.ts Normal file
View file

@ -0,0 +1,59 @@
import { getSchema } from "@tiptap/core";
import { generateHTML, generateJSON } from "@tiptap/html";
import { prosemirrorJSONToYDoc, yXmlFragmentToProseMirrorRootNode } from "y-prosemirror";
import * as Y from "yjs"
// plane editor
import { CoreEditorExtensionsWithoutProps, DocumentEditorExtensionsWithoutProps } from "@plane/editor/lib";
const DOCUMENT_EDITOR_EXTENSIONS = [
...CoreEditorExtensionsWithoutProps,
...DocumentEditorExtensionsWithoutProps,
];
const documentEditorSchema = getSchema(DOCUMENT_EDITOR_EXTENSIONS);
export const getAllDocumentFormatsFromBinaryData = (description: Uint8Array): {
contentBinaryEncoded: string;
contentJSON: object;
contentHTML: string;
} => {
// encode binary description data
const base64Data = Buffer.from(description).toString("base64");
const yDoc = new Y.Doc();
Y.applyUpdate(yDoc, description);
// convert to JSON
const type = yDoc.getXmlFragment("default");
const contentJSON = yXmlFragmentToProseMirrorRootNode(
type,
documentEditorSchema
).toJSON();
// convert to HTML
const contentHTML = generateHTML(contentJSON, DOCUMENT_EDITOR_EXTENSIONS);
return {
contentBinaryEncoded: base64Data,
contentJSON,
contentHTML,
};
}
export const getBinaryDataFromHTMLString = (descriptionHTML: string): {
contentBinary: Uint8Array
} => {
// convert HTML to JSON
const contentJSON = generateJSON(
descriptionHTML ?? "<p></p>",
DOCUMENT_EDITOR_EXTENSIONS
);
// convert JSON to Y.Doc format
const transformedData = prosemirrorJSONToYDoc(
documentEditorSchema,
contentJSON,
"default"
);
// convert Y.Doc to Uint8Array format
const encodedData = Y.encodeStateAsUpdate(transformedData);
return {
contentBinary: encodedData
}
}

58
live/src/core/lib/page.ts
View file

@ -1,8 +1,8 @@
// plane editor
// helpers
import {
getAllDocumentFormatsFromDocumentEditorBinaryData,
getBinaryDataFromDocumentEditorHTMLString,
} from "@plane/editor/lib";
getAllDocumentFormatsFromBinaryData,
getBinaryDataFromHTMLString,
} from "@/core/helpers/page.js";
// services
import { PageService } from "@/core/services/page.service.js";
import { manualLogger } from "../helpers/logger.js";
@ -12,10 +12,12 @@ export const updatePageDescription = async (
params: URLSearchParams,
pageId: string,
updatedDescription: Uint8Array,
cookie: string | undefined
cookie: string | undefined,
) => {
if (!(updatedDescription instanceof Uint8Array)) {
throw new Error("Invalid updatedDescription: must be an instance of Uint8Array");
throw new Error(
"Invalid updatedDescription: must be an instance of Uint8Array",
);
}
const workspaceSlug = params.get("workspaceSlug")?.toString();
@ -23,7 +25,7 @@ export const updatePageDescription = async (
if (!workspaceSlug || !projectId || !cookie) return;
const { contentBinaryEncoded, contentHTML, contentJSON } =
getAllDocumentFormatsFromDocumentEditorBinaryData(updatedDescription);
getAllDocumentFormatsFromBinaryData(updatedDescription);
try {
const payload = {
description_binary: contentBinaryEncoded,
@ -31,7 +33,13 @@ export const updatePageDescription = async (
description: contentJSON,
};
await pageService.updateDescription(workspaceSlug, projectId, pageId, payload, cookie);
await pageService.updateDescription(
workspaceSlug,
projectId,
pageId,
payload,
cookie,
);
} catch (error) {
manualLogger.error("Update error:", error);
throw error;
@ -42,16 +50,26 @@ const fetchDescriptionHTMLAndTransform = async (
workspaceSlug: string,
projectId: string,
pageId: string,
cookie: string
cookie: string,
) => {
if (!workspaceSlug || !projectId || !cookie) return;
try {
const pageDetails = await pageService.fetchDetails(workspaceSlug, projectId, pageId, cookie);
const contentBinary = getBinaryDataFromDocumentEditorHTMLString(pageDetails.description_html ?? "<p></p>");
const pageDetails = await pageService.fetchDetails(
workspaceSlug,
projectId,
pageId,
cookie,
);
const { contentBinary } = getBinaryDataFromHTMLString(
pageDetails.description_html ?? "<p></p>",
);
return contentBinary;
} catch (error) {
manualLogger.error("Error while transforming from HTML to Uint8Array", error);
manualLogger.error(
"Error while transforming from HTML to Uint8Array",
error,
);
throw error;
}
};
@ -59,18 +77,28 @@ const fetchDescriptionHTMLAndTransform = async (
export const fetchPageDescriptionBinary = async (
params: URLSearchParams,
pageId: string,
cookie: string | undefined
cookie: string | undefined,
) => {
const workspaceSlug = params.get("workspaceSlug")?.toString();
const projectId = params.get("projectId")?.toString();
if (!workspaceSlug || !projectId || !cookie) return null;
try {
const response = await pageService.fetchDescriptionBinary(workspaceSlug, projectId, pageId, cookie);
const response = await pageService.fetchDescriptionBinary(
workspaceSlug,
projectId,
pageId,
cookie,
);
const binaryData = new Uint8Array(response);
if (binaryData.byteLength === 0) {
const binary = await fetchDescriptionHTMLAndTransform(workspaceSlug, projectId, pageId, cookie);
const binary = await fetchDescriptionHTMLAndTransform(
workspaceSlug,
projectId,
pageId,
cookie,
);
if (binary) {
return binary;
}

49
live/src/core/resolve-conflicts.ts
View file

@ -1,49 +0,0 @@
// plane editor
import {
applyUpdates,
convertBase64StringToBinaryData,
getAllDocumentFormatsFromRichTextEditorBinaryData,
} from "@plane/editor/lib";
export type TResolveConflictsRequestBody = {
original_document: string;
updates: string;
};
export type TResolveConflictsResponse = {
description_binary: string;
description_html: string;
description: object;
};
export const resolveDocumentConflicts = (body: TResolveConflictsRequestBody): TResolveConflictsResponse => {
const { original_document, updates } = body;
try {
// convert from base64 to buffer
const originalDocumentBuffer = original_document ? convertBase64StringToBinaryData(original_document) : null;
const updatesBuffer = updates ? convertBase64StringToBinaryData(updates) : null;
// decode req.body
const decodedOriginalDocument = originalDocumentBuffer ? new Uint8Array(originalDocumentBuffer) : new Uint8Array();
const decodedUpdates = updatesBuffer ? new Uint8Array(updatesBuffer) : new Uint8Array();
// resolve conflicts
let resolvedDocument: Uint8Array;
if (decodedOriginalDocument.length === 0) {
// use updates to create the document id original_description is null
resolvedDocument = applyUpdates(decodedUpdates);
} else {
// use original document and updates to resolve conflicts
resolvedDocument = applyUpdates(decodedOriginalDocument, decodedUpdates);
}
const { contentBinaryEncoded, contentHTML, contentJSON } =
getAllDocumentFormatsFromRichTextEditorBinaryData(resolvedDocument);
return {
description_binary: contentBinaryEncoded,
description_html: contentHTML,
description: contentJSON,
};
} catch (error) {
throw new Error("Internal server error");
}
};

32
live/src/server.ts
View file

@ -5,13 +5,16 @@ import expressWs from "express-ws";
import * as Sentry from "@sentry/node";
import compression from "compression";
import helmet from "helmet";
// cors
import cors from "cors";
// core hocuspocus server
import { getHocusPocusServer } from "@/core/hocuspocus-server.js";
// helpers
import { errorHandler } from "@/core/helpers/error-handler.js";
import { logger, manualLogger } from "@/core/helpers/logger.js";
import { resolveDocumentConflicts, TResolveConflictsRequestBody } from "@/core/resolve-conflicts.js";
import { errorHandler } from "@/core/helpers/error-handler.js";
const app = express();
expressWs(app);
@ -26,7 +29,7 @@ app.use(
compression({
level: 6,
threshold: 5 * 1000,
})
}),
);
// Logging middleware
@ -59,25 +62,6 @@ router.ws("/collaboration", (ws, req) => {
}
});
app.post("/resolve-document-conflicts", (req, res) => {
const { original_document, updates } = req.body as TResolveConflictsRequestBody;
try {
if (original_document === undefined || updates === undefined) {
res.status(400).send({
message: "Missing required fields",
});
return;
}
const resolvedDocument = resolveDocumentConflicts(req.body);
res.status(200).json(resolvedDocument);
} catch (error) {
manualLogger.error("Error in /resolve-document-conflicts endpoint:", error);
res.status(500).send({
message: "Internal server error",
});
}
});
app.use(process.env.LIVE_BASE_PATH || "/live", router);
app.use((_req, res) => {
@ -98,7 +82,9 @@ const gracefulShutdown = async () => {
try {
// Close the HocusPocus server WebSocket connections
await HocusPocusServer.destroy();
manualLogger.info("HocusPocus server WebSocket connections closed gracefully.");
manualLogger.info(
"HocusPocus server WebSocket connections closed gracefully.",
);
// Close the Express server
liveServer.close(() => {

4
packages/editor/src/core/components/editors/document/collaborative-editor.tsx
View file

@ -8,7 +8,7 @@ import { IssueWidget } from "@/extensions";
// helpers
import { getEditorClassNames } from "@/helpers/common";
// hooks
import { useCollaborativeDocumentEditor } from "@/hooks/use-collaborative-document-editor";
import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
// types
import { EditorRefApi, ICollaborativeDocumentEditor } from "@/types";
@ -43,7 +43,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
}
// use document editor
const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeDocumentEditor({
const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
onTransaction,
disabledExtensions,
editorClassName,

4
packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx
View file

@ -8,7 +8,7 @@ import { IssueWidget } from "@/extensions";
// helpers
import { getEditorClassNames } from "@/helpers/common";
// hooks
import { useCollaborativeDocumentReadOnlyEditor } from "@/hooks/use-collaborative-document-read-only-editor";
import { useReadOnlyCollaborativeEditor } from "@/hooks/use-read-only-collaborative-editor";
// types
import { EditorReadOnlyRefApi, ICollaborativeDocumentReadOnlyEditor } from "@/types";
@ -36,7 +36,7 @@ const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOn
);
}
const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeDocumentReadOnlyEditor({
const { editor, hasServerConnectionFailed, hasServerSynced } = useReadOnlyCollaborativeEditor({
editorClassName,
extensions,
fileHandler,

4
packages/editor/src/core/components/editors/editor-wrapper.tsx
View file

@ -1,4 +1,4 @@
import { AnyExtension, Editor } from "@tiptap/core";
import { Editor, Extension } from "@tiptap/core";
// components
import { EditorContainer } from "@/components/editors";
// constants
@ -12,7 +12,7 @@ import { EditorContentWrapper } from "./editor-content";
type Props = IEditorProps & {
children?: (editor: Editor) => React.ReactNode;
extensions: AnyExtension[];
extensions: Extension<any, any>[];
};
export const EditorWrapper: React.FC<Props> = (props) => {

72
packages/editor/src/core/components/editors/rich-text/collaborative-editor.tsx
View file

@ -1,72 +0,0 @@
import React from "react";
// components
import { EditorContainer, EditorContentWrapper } from "@/components/editors";
import { EditorBubbleMenu } from "@/components/menus";
// constants
import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
// helpers
import { getEditorClassNames } from "@/helpers/common";
// hooks
import { useCollaborativeRichTextEditor } from "@/hooks/use-collaborative-rich-text-editor";
// types
import { EditorRefApi, ICollaborativeRichTextEditor } from "@/types";
const CollaborativeRichTextEditor = (props: ICollaborativeRichTextEditor) => {
const {
containerClassName,
displayConfig = DEFAULT_DISPLAY_CONFIG,
editorClassName,
fileHandler,
forwardedRef,
id,
mentionHandler,
onChange,
placeholder,
tabIndex,
value,
} = props;
const { editor } = useCollaborativeRichTextEditor({
editorClassName,
fileHandler,
forwardedRef,
id,
mentionHandler,
onChange,
placeholder,
tabIndex,
value,
});
const editorContainerClassName = getEditorClassNames({
noBorder: true,
borderOnFocus: false,
containerClassName,
});
if (!editor) return null;
return (
<EditorContainer
displayConfig={displayConfig}
editor={editor}
editorContainerClassName={editorContainerClassName}
id={id}
>
<EditorBubbleMenu editor={editor} />
<div className="flex flex-col">
<EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
</div>
</EditorContainer>
);
};
const CollaborativeRichTextEditorWithRef = React.forwardRef<EditorRefApi, ICollaborativeRichTextEditor>(
(props, ref) => (
<CollaborativeRichTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
)
);
CollaborativeRichTextEditorWithRef.displayName = "CollaborativeRichTextEditorWithRef";
export { CollaborativeRichTextEditorWithRef };

70
packages/editor/src/core/components/editors/rich-text/collaborative-read-only-editor.tsx
View file

@ -1,70 +0,0 @@
import React from "react";
// components
import { EditorContainer, EditorContentWrapper } from "@/components/editors";
import { EditorBubbleMenu } from "@/components/menus";
// constants
import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
// helpers
import { getEditorClassNames } from "@/helpers/common";
// hooks
import { useCollaborativeRichTextReadOnlyEditor } from "@/hooks/use-collaborative-rich-text-read-only-editor";
// types
import { EditorReadOnlyRefApi, ICollaborativeRichTextReadOnlyEditor } from "@/types";
const CollaborativeRichTextReadOnlyEditor = (props: ICollaborativeRichTextReadOnlyEditor) => {
const {
containerClassName,
displayConfig = DEFAULT_DISPLAY_CONFIG,
editorClassName,
fileHandler,
forwardedRef,
id,
mentionHandler,
value,
} = props;
const { editor } = useCollaborativeRichTextReadOnlyEditor({
editorClassName,
fileHandler,
forwardedRef,
id,
mentionHandler,
value,
});
const editorContainerClassName = getEditorClassNames({
noBorder: true,
borderOnFocus: false,
containerClassName,
});
if (!editor) return null;
return (
<EditorContainer
displayConfig={displayConfig}
editor={editor}
editorContainerClassName={editorContainerClassName}
id={id}
>
<EditorBubbleMenu editor={editor} />
<div className="flex flex-col">
<EditorContentWrapper editor={editor} id={id} />
</div>
</EditorContainer>
);
};
const CollaborativeRichTextReadOnlyEditorWithRef = React.forwardRef<
EditorReadOnlyRefApi,
ICollaborativeRichTextReadOnlyEditor
>((props, ref) => (
<CollaborativeRichTextReadOnlyEditor
{...props}
forwardedRef={ref as React.MutableRefObject<EditorReadOnlyRefApi | null>}
/>
));
CollaborativeRichTextReadOnlyEditorWithRef.displayName = "CollaborativeRichTextReadOnlyEditorWithRef";
export { CollaborativeRichTextReadOnlyEditorWithRef };

2
packages/editor/src/core/components/editors/rich-text/index.ts
View file

@ -1,4 +1,2 @@
export * from "./collaborative-editor";
export * from "./collaborative-read-only-editor";
export * from "./editor";
export * from "./read-only-editor";

132
packages/editor/src/core/helpers/yjs-utils.ts
View file

@ -1,132 +0,0 @@
import { CoreEditorExtensionsWithoutProps, DocumentEditorExtensionsWithoutProps } from "@/extensions";
import { getSchema } from "@tiptap/core";
import { generateHTML, generateJSON } from "@tiptap/html";
import { prosemirrorJSONToYDoc, yXmlFragmentToProseMirrorRootNode } from "y-prosemirror";
import * as Y from "yjs";
// editor extension configs
const RICH_TEXT_EDITOR_EXTENSIONS = CoreEditorExtensionsWithoutProps;
const DOCUMENT_EDITOR_EXTENSIONS = [...CoreEditorExtensionsWithoutProps, ...DocumentEditorExtensionsWithoutProps];
// editor schemas
const richTextEditorSchema = getSchema(RICH_TEXT_EDITOR_EXTENSIONS);
const documentEditorSchema = getSchema(DOCUMENT_EDITOR_EXTENSIONS);
/**
* @description apply updates to a doc and return the updated doc in binary format
* @param {Uint8Array} document
* @param {Uint8Array} updates
* @returns {Uint8Array}
*/
export const applyUpdates = (document: Uint8Array, updates?: Uint8Array): Uint8Array => {
const yDoc = new Y.Doc();
Y.applyUpdate(yDoc, document);
if (updates) {
Y.applyUpdate(yDoc, updates);
}
const encodedDoc = Y.encodeStateAsUpdate(yDoc);
return encodedDoc;
};
/**
* @description this function encodes binary data to base64 string
* @param {Uint8Array} document
* @returns {string}
*/
export const convertBinaryDataToBase64String = (document: Uint8Array): string =>
Buffer.from(document).toString("base64");
/**
* @description this function decodes base64 string to binary data
* @param {string} document
* @returns {ArrayBuffer}
*/
export const convertBase64StringToBinaryData = (document: string): ArrayBuffer => Buffer.from(document, "base64");
/**
* @description this function generates the binary equivalent of html content for the rich text editor
* @param {string} descriptionHTML
* @returns {Uint8Array}
*/
export const getBinaryDataFromRichTextEditorHTMLString = (descriptionHTML: string): Uint8Array => {
// convert HTML to JSON
const contentJSON = generateJSON(descriptionHTML ?? "<p></p>", RICH_TEXT_EDITOR_EXTENSIONS);
// convert JSON to Y.Doc format
const transformedData = prosemirrorJSONToYDoc(richTextEditorSchema, contentJSON, "default");
// convert Y.Doc to Uint8Array format
const encodedData = Y.encodeStateAsUpdate(transformedData);
return encodedData;
};
/**
* @description this function generates the binary equivalent of html content for the document editor
* @param {string} descriptionHTML
* @returns {Uint8Array}
*/
export const getBinaryDataFromDocumentEditorHTMLString = (descriptionHTML: string): Uint8Array => {
// convert HTML to JSON
const contentJSON = generateJSON(descriptionHTML ?? "<p></p>", DOCUMENT_EDITOR_EXTENSIONS);
// convert JSON to Y.Doc format
const transformedData = prosemirrorJSONToYDoc(documentEditorSchema, contentJSON, "default");
// convert Y.Doc to Uint8Array format
const encodedData = Y.encodeStateAsUpdate(transformedData);
return encodedData;
};
/**
* @description this function generates all document formats for the provided binary data for the rich text editor
* @param {Uint8Array} description
* @returns
*/
export const getAllDocumentFormatsFromRichTextEditorBinaryData = (
description: Uint8Array
): {
contentBinaryEncoded: string;
contentJSON: object;
contentHTML: string;
} => {
// encode binary description data
const base64Data = convertBinaryDataToBase64String(description);
const yDoc = new Y.Doc();
Y.applyUpdate(yDoc, description);
// convert to JSON
const type = yDoc.getXmlFragment("default");
const contentJSON = yXmlFragmentToProseMirrorRootNode(type, richTextEditorSchema).toJSON();
// convert to HTML
const contentHTML = generateHTML(contentJSON, RICH_TEXT_EDITOR_EXTENSIONS);
return {
contentBinaryEncoded: base64Data,
contentJSON,
contentHTML,
};
};
/**
* @description this function generates all document formats for the provided binary data for the document editor
* @param {Uint8Array} description
* @returns
*/
export const getAllDocumentFormatsFromDocumentEditorBinaryData = (
description: Uint8Array
): {
contentBinaryEncoded: string;
contentJSON: object;
contentHTML: string;
} => {
// encode binary description data
const base64Data = convertBinaryDataToBase64String(description);
const yDoc = new Y.Doc();
Y.applyUpdate(yDoc, description);
// convert to JSON
const type = yDoc.getXmlFragment("default");
const contentJSON = yXmlFragmentToProseMirrorRootNode(type, documentEditorSchema).toJSON();
// convert to HTML
const contentHTML = generateHTML(contentJSON, DOCUMENT_EDITOR_EXTENSIONS);
return {
contentBinaryEncoded: base64Data,
contentJSON,
contentHTML,
};
};

16
packages/editor/src/core/helpers/yjs.ts Normal file
View file

@ -0,0 +1,16 @@
import * as Y from "yjs";
/**
* @description apply updates to a doc and return the updated doc in base64(binary) format
* @param {Uint8Array} document
* @param {Uint8Array} updates
* @returns {string} base64(binary) form of the updated doc
*/
export const applyUpdates = (document: Uint8Array, updates: Uint8Array): Uint8Array => {
const yDoc = new Y.Doc();
Y.applyUpdate(yDoc, document);
Y.applyUpdate(yDoc, updates);
const encodedDoc = Y.encodeStateAsUpdate(yDoc);
return encodedDoc;
};

6
packages/editor/src/core/hooks/use-collaborative-document-editor.ts → packages/editor/src/core/hooks/use-collaborative-editor.ts
View file

@ -9,9 +9,9 @@ import { useEditor } from "@/hooks/use-editor";
// plane editor extensions
import { DocumentEditorAdditionalExtensions } from "@/plane-editor/extensions";
// types
import { TCollaborativeDocumentEditorHookProps } from "@/types";
import { TCollaborativeEditorProps } from "@/types";
export const useCollaborativeDocumentEditor = (props: TCollaborativeDocumentEditorHookProps) => {
export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
const {
onTransaction,
disabledExtensions,
@ -102,7 +102,7 @@ export const useCollaborativeDocumentEditor = (props: TCollaborativeDocumentEdit
forwardedRef,
mentionHandler,
placeholder,
providerDocument: provider.document,
provider,
tabIndex,
});

78
packages/editor/src/core/hooks/use-collaborative-rich-text-editor.ts
View file

@ -1,78 +0,0 @@
import { useEffect, useMemo } from "react";
import Collaboration from "@tiptap/extension-collaboration";
import * as Y from "yjs";
// extensions
import { HeadingListExtension, SideMenuExtension } from "@/extensions";
// hooks
import { useEditor } from "@/hooks/use-editor";
// providers
import { CustomCollaborationProvider } from "@/providers";
// types
import { TCollaborativeRichTextEditorHookProps } from "@/types";
export const useCollaborativeRichTextEditor = (props: TCollaborativeRichTextEditorHookProps) => {
const {
editorClassName,
editorProps = {},
extensions,
fileHandler,
forwardedRef,
handleEditorReady,
id,
mentionHandler,
onChange,
placeholder,
tabIndex,
value,
} = props;
// initialize custom collaboration provider
const provider = useMemo(
() =>
new CustomCollaborationProvider({
name: id,
onChange,
}),
[id]
);
useEffect(() => {
if (provider.hasSynced) return;
if (value && value.length > 0) {
try {
Y.applyUpdate(provider.document, value);
provider.hasSynced = true;
} catch (error) {
console.error("Error applying binary updates to the description", error);
}
}
}, [value, provider.document]);
const editor = useEditor({
id,
editorProps,
editorClassName,
enableHistory: false,
extensions: [
SideMenuExtension({
aiEnabled: false,
dragDropEnabled: true,
}),
HeadingListExtension,
Collaboration.configure({
document: provider.document,
}),
...(extensions ?? []),
],
fileHandler,
handleEditorReady,
forwardedRef,
mentionHandler,
placeholder,
providerDocument: provider.document,
tabIndex,
});
return {
editor,
};
};

64
packages/editor/src/core/hooks/use-collaborative-rich-text-read-only-editor.ts
View file

@ -1,64 +0,0 @@
import { useEffect, useMemo } from "react";
import Collaboration from "@tiptap/extension-collaboration";
import * as Y from "yjs";
// extensions
import { HeadingListExtension, SideMenuExtension } from "@/extensions";
// hooks
import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
// providers
import { CustomCollaborationProvider } from "@/providers";
// types
import { TCollaborativeRichTextReadOnlyEditorHookProps } from "@/types";
export const useCollaborativeRichTextReadOnlyEditor = (props: TCollaborativeRichTextReadOnlyEditorHookProps) => {
const {
editorClassName,
editorProps = {},
extensions,
fileHandler,
forwardedRef,
handleEditorReady,
id,
mentionHandler,
value,
} = props;
// initialize custom collaboration provider
const provider = useMemo(
() =>
new CustomCollaborationProvider({
name: id,
}),
[id]
);
useEffect(() => {
if (value.length > 0) {
Y.applyUpdate(provider.document, value);
}
}, [value, provider.document]);
const editor = useReadOnlyEditor({
editorProps,
editorClassName,
extensions: [
SideMenuExtension({
aiEnabled: false,
dragDropEnabled: true,
}),
HeadingListExtension,
Collaboration.configure({
document: provider.document,
}),
...(extensions ?? []),
],
fileHandler,
handleEditorReady,
forwardedRef,
mentionHandler,
providerDocument: provider.document,
});
return {
editor,
};
};

9
packages/editor/src/core/hooks/use-editor.ts
View file

@ -1,4 +1,5 @@
import { useImperativeHandle, useRef, MutableRefObject, useState, useEffect } from "react";
import { HocuspocusProvider } from "@hocuspocus/provider";
import { DOMSerializer } from "@tiptap/pm/model";
import { Selection } from "@tiptap/pm/state";
import { EditorProps } from "@tiptap/pm/view";
@ -35,7 +36,7 @@ export interface CustomEditorProps {
onTransaction?: () => void;
autofocus?: boolean;
placeholder?: string | ((isFocused: boolean, value: string) => string);
providerDocument?: Y.Doc;
provider?: HocuspocusProvider;
tabIndex?: number;
// undefined when prop is not passed, null if intentionally passed to stop
// swr syncing
@ -57,7 +58,7 @@ export const useEditor = (props: CustomEditorProps) => {
onChange,
onTransaction,
placeholder,
providerDocument,
provider,
tabIndex,
value,
autofocus = false,
@ -205,7 +206,7 @@ export const useEditor = (props: CustomEditorProps) => {
return markdownOutput;
},
getDocument: () => {
const documentBinary = providerDocument ? Y.encodeStateAsUpdate(providerDocument) : null;
const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
const documentJSON = editorRef.current?.getJSON() ?? null;
@ -283,7 +284,7 @@ export const useEditor = (props: CustomEditorProps) => {
words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
}),
setProviderDocument: (value) => {
const document = providerDocument;
const document = provider?.document;
if (!document) return;
Y.applyUpdate(document, value);
},

6
packages/editor/src/core/hooks/use-collaborative-document-read-only-editor.ts → packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
View file

@ -7,9 +7,9 @@ import { HeadingListExtension } from "@/extensions";
// hooks
import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
// types
import { TCollaborativeDocumentReadOnlyEditorHookProps } from "@/types";
import { TReadOnlyCollaborativeEditorProps } from "@/types";
export const useCollaborativeDocumentReadOnlyEditor = (props: TCollaborativeDocumentReadOnlyEditorHookProps) => {
export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEditorProps) => {
const {
editorClassName,
editorProps = {},
@ -79,7 +79,7 @@ export const useCollaborativeDocumentReadOnlyEditor = (props: TCollaborativeDocu
forwardedRef,
handleEditorReady,
mentionHandler,
providerDocument: provider.document,
provider,
});
return {

7
packages/editor/src/core/hooks/use-read-only-editor.ts
View file

@ -1,4 +1,5 @@
import { useImperativeHandle, useRef, MutableRefObject, useEffect } from "react";
import { HocuspocusProvider } from "@hocuspocus/provider";
import { EditorProps } from "@tiptap/pm/view";
import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
import * as Y from "yjs";
@ -23,7 +24,7 @@ interface CustomReadOnlyEditorProps {
mentionHandler: {
highlights: () => Promise<IMentionHighlight[]>;
};
providerDocument?: Y.Doc;
provider?: HocuspocusProvider;
}
export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
@ -36,7 +37,7 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
fileHandler,
handleEditorReady,
mentionHandler,
providerDocument,
provider,
} = props;
const editor = useCustomEditor({
@ -85,7 +86,7 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
return markdownOutput;
},
getDocument: () => {
const documentBinary = providerDocument ? Y.encodeStateAsUpdate(providerDocument) : null;
const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
const documentJSON = editorRef.current?.getJSON() ?? null;

61
packages/editor/src/core/providers/custom-collaboration-provider.ts
View file

@ -1,61 +0,0 @@
import * as Y from "yjs";
export interface CompleteCollaborationProviderConfiguration {
/**
* The identifier/name of your document
*/
name: string;
/**
* The actual Y.js document
*/
document: Y.Doc;
/**
* onChange callback
*/
onChange: (updates: Uint8Array) => void;
}
export type CollaborationProviderConfiguration = Required<Pick<CompleteCollaborationProviderConfiguration, "name">> &
Partial<CompleteCollaborationProviderConfiguration>;
export class CustomCollaborationProvider {
public hasSynced: boolean;
public configuration: CompleteCollaborationProviderConfiguration = {
name: "",
document: new Y.Doc(),
onChange: () => {},
};
constructor(configuration: CollaborationProviderConfiguration) {
this.hasSynced = false;
this.setConfiguration(configuration);
this.document.on("update", this.documentUpdateHandler.bind(this));
this.document.on("destroy", this.documentDestroyHandler.bind(this));
}
public setConfiguration(configuration: Partial<CompleteCollaborationProviderConfiguration> = {}): void {
this.configuration = {
...this.configuration,
...configuration,
};
}
get document() {
return this.configuration.document;
}
async documentUpdateHandler(_update: Uint8Array, origin: any) {
if (!this.hasSynced) return;
// return if the update is from the provider itself
if (origin === this) return;
// call onChange with the update
const stateVector = Y.encodeStateAsUpdate(this.document);
this.configuration.onChange?.(stateVector);
}
documentDestroyHandler() {
this.document.off("update", this.documentUpdateHandler);
this.document.off("destroy", this.documentDestroyHandler);
}
}

1
packages/editor/src/core/providers/index.ts
View file

@ -1 +0,0 @@
export * from "./custom-collaboration-provider";

31
packages/editor/src/core/types/collaboration-hook.ts → packages/editor/src/core/types/collaboration.ts
View file

@ -19,7 +19,7 @@ export type TServerHandler = {
onServerError?: () => void;
};
type TCollaborativeEditorHookCommonProps = {
type TCollaborativeEditorHookProps = {
disabledExtensions?: TExtensions[];
editorClassName: string;
editorProps?: EditorProps;
@ -30,9 +30,12 @@ type TCollaborativeEditorHookCommonProps = {
highlights: () => Promise<IMentionHighlight[]>;
suggestions?: () => Promise<IMentionSuggestion[]>;
};
realtimeConfig: TRealtimeConfig;
serverHandler?: TServerHandler;
user: TUserDetails;
};
type TCollaborativeEditorHookProps = TCollaborativeEditorHookCommonProps & {
export type TCollaborativeEditorProps = TCollaborativeEditorHookProps & {
onTransaction?: () => void;
embedHandler?: TEmbedConfig;
fileHandler: TFileHandler;
@ -41,29 +44,7 @@ type TCollaborativeEditorHookProps = TCollaborativeEditorHookCommonProps & {
tabIndex?: number;
};
type TCollaborativeReadOnlyEditorHookProps = TCollaborativeEditorHookCommonProps & {
export type TReadOnlyCollaborativeEditorProps = TCollaborativeEditorHookProps & {
fileHandler: Pick<TFileHandler, "getAssetSrc">;
forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
};
export type TCollaborativeRichTextEditorHookProps = TCollaborativeEditorHookProps & {
onChange: (updatedDescription: Uint8Array) => void;
value: Uint8Array;
};
export type TCollaborativeRichTextReadOnlyEditorHookProps = TCollaborativeReadOnlyEditorHookProps & {
value: Uint8Array;
};
export type TCollaborativeDocumentEditorHookProps = TCollaborativeEditorHookProps & {
embedHandler?: TEmbedConfig;
realtimeConfig: TRealtimeConfig;
serverHandler?: TServerHandler;
user: TUserDetails;
};
export type TCollaborativeDocumentReadOnlyEditorHookProps = TCollaborativeReadOnlyEditorHookProps & {
realtimeConfig: TRealtimeConfig;
serverHandler?: TServerHandler;
user: TUserDetails;
};

10
packages/editor/src/core/types/editor.ts
View file

@ -132,12 +132,6 @@ export interface IRichTextEditor extends IEditorProps {
dragDropEnabled?: boolean;
}
export interface ICollaborativeRichTextEditor extends Omit<IEditorProps, "initialValue" | "onChange" | "value"> {
dragDropEnabled?: boolean;
onChange: (updatedDescription: Uint8Array) => void;
value: Uint8Array;
}
export interface ICollaborativeDocumentEditor
extends Omit<IEditorProps, "initialValue" | "onChange" | "onEnterKeyPress" | "value"> {
aiHandler?: TAIHandler;
@ -167,10 +161,6 @@ export type ILiteTextReadOnlyEditor = IReadOnlyEditorProps;
export type IRichTextReadOnlyEditor = IReadOnlyEditorProps;
export type ICollaborativeRichTextReadOnlyEditor = Omit<IReadOnlyEditorProps, "initialValue"> & {
value: Uint8Array;
};
export interface ICollaborativeDocumentReadOnlyEditor extends Omit<IReadOnlyEditorProps, "initialValue"> {
embedHandler: TEmbedConfig;
handleEditorReady?: (value: boolean) => void;

2
packages/editor/src/core/types/index.ts
View file

@ -1,5 +1,5 @@
export * from "./ai";
export * from "./collaboration-hook";
export * from "./collaboration";
export * from "./config";
export * from "./editor";
export * from "./embed";

4
packages/editor/src/index.ts
View file

@ -10,8 +10,6 @@ import "./styles/drag-drop.css";
export {
CollaborativeDocumentEditorWithRef,
CollaborativeDocumentReadOnlyEditorWithRef,
CollaborativeRichTextEditorWithRef,
CollaborativeRichTextReadOnlyEditorWithRef,
DocumentReadOnlyEditorWithRef,
LiteTextEditorWithRef,
LiteTextReadOnlyEditorWithRef,
@ -27,7 +25,7 @@ export * from "@/constants/common";
// helpers
export * from "@/helpers/common";
export * from "@/helpers/editor-commands";
export * from "@/helpers/yjs-utils";
export * from "@/helpers/yjs";
export * from "@/extensions/table/table";
// components

2
packages/editor/src/lib.ts
View file

@ -1 +1 @@
export * from "@/helpers/yjs-utils";
export * from "@/extensions/core-without-props";

1
packages/types/src/issues/issue.d.ts vendored
View file

@ -50,7 +50,6 @@ export type IssueRelation = {
};
export type TIssue = TBaseIssue & {
description_binary?: string;
description_html?: string;
is_subscribed?: boolean;
parent?: Partial<TBaseIssue>;

2
web/core/components/core/modals/gpt-assistant-popover.tsx
View file

@ -9,7 +9,7 @@ import { Popover, Transition } from "@headlessui/react";
// ui
import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { RichTextReadOnlyEditor } from "@/components/editor";
import { RichTextReadOnlyEditor } from "@/components/editor/rich-text-editor/rich-text-read-only-editor";
// services
import { AIService } from "@/services/ai.service";

63
web/core/components/editor/rich-text-editor/collaborative-editor.tsx
View file

@ -1,63 +0,0 @@
import React, { forwardRef } from "react";
// editor
import { CollaborativeRichTextEditorWithRef, EditorRefApi, ICollaborativeRichTextEditor } from "@plane/editor";
// types
import { IUserLite } from "@plane/types";
// helpers
import { cn } from "@/helpers/common.helper";
import { getEditorFileHandlers } from "@/helpers/editor.helper";
// hooks
import { useMember, useMention, useUser } from "@/hooks/store";
// plane web hooks
import { useFileSize } from "@/plane-web/hooks/use-file-size";
interface Props extends Omit<ICollaborativeRichTextEditor, "fileHandler" | "mentionHandler"> {
key: string;
projectId: string;
uploadFile: (file: File) => Promise<string>;
workspaceId: string;
workspaceSlug: string;
}
export const CollaborativeRichTextEditor = forwardRef<EditorRefApi, Props>((props, ref) => {
const { containerClassName, workspaceSlug, workspaceId, projectId, uploadFile, ...rest } = props;
// store hooks
const { data: currentUser } = useUser();
const {
getUserDetails,
project: { getProjectMemberIds },
} = useMember();
// derived values
const projectMemberIds = getProjectMemberIds(projectId);
const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
// use-mention
const { mentionHighlights, mentionSuggestions } = useMention({
workspaceSlug,
projectId,
members: projectMemberDetails,
user: currentUser,
});
// file size
const { maxFileSize } = useFileSize();
return (
<CollaborativeRichTextEditorWithRef
ref={ref}
fileHandler={getEditorFileHandlers({
maxFileSize,
projectId,
uploadFile,
workspaceId,
workspaceSlug,
})}
mentionHandler={{
highlights: mentionHighlights,
suggestions: mentionSuggestions,
}}
{...rest}
containerClassName={cn("relative pl-3", containerClassName)}
/>
);
});
CollaborativeRichTextEditor.displayName = "CollaborativeRichTextEditor";

63
web/core/components/editor/rich-text-editor/collaborative-read-only-editor.tsx
View file

@ -1,63 +0,0 @@
import React from "react";
// editor
import {
CollaborativeRichTextReadOnlyEditorWithRef,
EditorReadOnlyRefApi,
ICollaborativeRichTextReadOnlyEditor,
} from "@plane/editor";
// plane ui
import { Loader } from "@plane/ui";
// helpers
import { cn } from "@/helpers/common.helper";
import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
// hooks
import { useMention } from "@/hooks/store";
import { useIssueDescription } from "@/hooks/use-issue-description";
type RichTextReadOnlyEditorWrapperProps = Omit<
ICollaborativeRichTextReadOnlyEditor,
"fileHandler" | "mentionHandler" | "value"
> & {
descriptionBinary: string | null;
descriptionHTML: string;
projectId?: string;
workspaceSlug: string;
};
export const CollaborativeRichTextReadOnlyEditor = React.forwardRef<
EditorReadOnlyRefApi,
RichTextReadOnlyEditorWrapperProps
>(({ descriptionBinary: savedDescriptionBinary, descriptionHTML, projectId, workspaceSlug, ...props }, ref) => {
const { mentionHighlights } = useMention({});
const { descriptionBinary } = useIssueDescription({
descriptionBinary: savedDescriptionBinary,
descriptionHTML,
});
if (!descriptionBinary)
return (
<Loader>
<Loader.Item height="150px" />
</Loader>
);
return (
<CollaborativeRichTextReadOnlyEditorWithRef
ref={ref}
value={descriptionBinary}
fileHandler={getReadOnlyEditorFileHandlers({
projectId,
workspaceSlug,
})}
mentionHandler={{
highlights: mentionHighlights,
}}
{...props}
// overriding the containerClassName to add relative class passed
containerClassName={cn(props.containerClassName, "relative pl-3")}
/>
);
});
CollaborativeRichTextReadOnlyEditor.displayName = "CollaborativeRichTextReadOnlyEditor";

6
web/core/components/editor/rich-text-editor/index.ts
View file

@ -1,4 +1,2 @@
export * from "./collaborative-editor";
export * from "./collaborative-read-only-editor";
export * from "./editor";
export * from "./read-only-editor";
export * from "./rich-text-editor";
export * from "./rich-text-read-only-editor";

0
web/core/components/editor/rich-text-editor/editor.tsx → web/core/components/editor/rich-text-editor/rich-text-editor.tsx
View file

0
web/core/components/editor/rich-text-editor/read-only-editor.tsx → web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
View file

58
web/core/components/inbox/content/issue-root.tsx
View file

@ -3,8 +3,10 @@
import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
import { observer } from "mobx-react";
import { usePathname } from "next/navigation";
// plane types
import { TIssue } from "@plane/types";
// plane ui
import { TOAST_TYPE, setToast } from "@plane/ui";
import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
// components
import { InboxIssueContentProperties } from "@/components/inbox/content";
import {
@ -20,12 +22,11 @@ import { ISSUE_ARCHIVED, ISSUE_DELETED } from "@/constants/event-tracker";
// helpers
import { getTextContent } from "@/helpers/editor.helper";
// hooks
import { useEventTracker, useIssueDetail, useProject, useUser } from "@/hooks/store";
import { useEventTracker, useIssueDetail, useProject, useProjectInbox, useUser } from "@/hooks/store";
import useReloadConfirmations from "@/hooks/use-reload-confirmation";
// store types
import { DeDupeIssuePopoverRoot } from "@/plane-web/components/de-dupe";
import { useDebouncedDuplicateIssues } from "@/plane-web/hooks/use-debounced-duplicate-issues";
// store
import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
type Props = {
@ -44,6 +45,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
const { data: currentUser } = useUser();
const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
const { captureIssueEvent } = useEventTracker();
const { loader } = useProjectInbox();
const { getProjectById } = useProject();
const { removeIssue, archiveIssue } = useIssueDetail();
@ -58,7 +60,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
}
}, [isSubmitting, setShowAlert, setIsSubmitting]);
// derived values
// dervied values
const issue = inboxIssue.issue;
const projectDetails = issue?.project_id ? getProjectById(issue?.project_id) : undefined;
@ -73,8 +75,12 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
const issueOperations: TIssueOperations = useMemo(
() => ({
fetch: async () => {},
remove: async (_workspaceSlug, _projectId, _issueId) => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, arrow-body-style
fetch: async (_workspaceSlug: string, _projectId: string, _issueId: string) => {
return;
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, arrow-body-style
remove: async (_workspaceSlug: string, _projectId: string, _issueId: string) => {
try {
await removeIssue(workspaceSlug, projectId, _issueId);
setToast({
@ -101,7 +107,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
});
}
},
update: async (_workspaceSlug, _projectId, _issueId, data) => {
update: async (_workspaceSlug: string, _projectId: string, _issueId: string, data: Partial<TIssue>) => {
try {
await inboxIssue.updateIssue(data);
captureIssueEvent({
@ -113,7 +119,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
},
path: pathname,
});
} catch {
} catch (error) {
setToast({
title: "Issue update failed",
type: TOAST_TYPE.ERROR,
@ -130,14 +136,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
});
}
},
updateDescription: async (_workspaceSlug, _projectId, _issueId, descriptionBinary) => {
try {
return await inboxIssue.updateIssueDescription(descriptionBinary);
} catch {
throw new Error("Failed to update issue description");
}
},
archive: async (workspaceSlug, projectId, issueId) => {
archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
await archiveIssue(workspaceSlug, projectId, issueId);
captureIssueEvent({
@ -155,7 +154,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
}
},
}),
[archiveIssue, captureIssueEvent, inboxIssue, pathname, projectId, removeIssue, workspaceSlug]
[inboxIssue]
);
if (!issue?.project_id || !issue?.id) return <></>;
@ -185,20 +184,21 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
containerClassName="-ml-3"
/>
{issue.description_binary !== undefined && (
{loader === "issue-loading" ? (
<Loader className="min-h-[6rem] rounded-md border border-custom-border-200">
<Loader.Item width="100%" height="140px" />
</Loader>
) : (
<IssueDescriptionInput
key={issue.id}
containerClassName="-ml-3 border-none"
descriptionBinary={issue.description_binary}
descriptionHTML={issue.description_html ?? "<p></p>"}
disabled={!isEditable}
updateDescription={async (data) =>
await issueOperations.updateDescription(workspaceSlug, projectId, issue.id ?? "", data)
}
issueId={issue.id}
projectId={issue.project_id}
setIsSubmitting={(value) => setIsSubmitting(value)}
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
issueId={issue.id}
swrIssueDescription={issue.description_html ?? "<p></p>"}
initialValue={issue.description_html ?? "<p></p>"}
disabled={!isEditable}
issueOperations={issueOperations}
setIsSubmitting={(value) => setIsSubmitting(value)}
containerClassName="-ml-3 border-none"
/>
)}

2
web/core/components/inbox/modals/create-modal/issue-description.tsx
View file

@ -10,7 +10,7 @@ import { EFileAssetType } from "@plane/types/src/enums";
// ui
import { Loader } from "@plane/ui";
// components
import { RichTextEditor } from "@/components/editor";
import { RichTextEditor } from "@/components/editor/rich-text-editor/rich-text-editor";
// constants
import { ETabIndices } from "@/constants/tab-indices";
// helpers

225
web/core/components/issues/description-input.tsx
View file

@ -1,144 +1,157 @@
"use client";
import { FC, useCallback, useRef } from "react";
import { FC, useCallback, useEffect, useState } from "react";
import debounce from "lodash/debounce";
import { observer } from "mobx-react";
// plane editor
import { convertBinaryDataToBase64String, EditorRefApi } from "@plane/editor";
import { Controller, useForm } from "react-hook-form";
// types
import { TIssue } from "@plane/types";
import { EFileAssetType } from "@plane/types/src/enums";
// plane ui
// ui
import { Loader } from "@plane/ui";
// components
import { CollaborativeRichTextEditor, CollaborativeRichTextReadOnlyEditor } from "@/components/editor";
import { RichTextEditor, RichTextReadOnlyEditor } from "@/components/editor";
import { TIssueOperations } from "@/components/issues/issue-detail";
// helpers
import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
// hooks
import { useWorkspace } from "@/hooks/store";
import { useIssueDescription } from "@/hooks/use-issue-description";
// services
import { FileService } from "@/services/file.service";
const fileService = new FileService();
export type IssueDescriptionInputProps = {
containerClassName?: string;
descriptionBinary: string | null;
descriptionHTML: string;
disabled?: boolean;
issueId: string;
key: string;
placeholder?: string | ((isFocused: boolean, value: string) => string);
projectId: string;
setIsSubmitting: (initialValue: "submitting" | "submitted" | "saved") => void;
updateDescription: (data: string) => Promise<ArrayBuffer>;
workspaceSlug: string;
projectId: string;
issueId: string;
initialValue: string | undefined;
disabled?: boolean;
issueOperations: TIssueOperations;
placeholder?: string | ((isFocused: boolean, value: string) => string);
setIsSubmitting: (initialValue: "submitting" | "submitted" | "saved") => void;
swrIssueDescription?: string | null | undefined;
};
export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
const {
containerClassName,
descriptionBinary: savedDescriptionBinary,
descriptionHTML,
disabled,
issueId,
placeholder,
projectId,
setIsSubmitting,
updateDescription,
workspaceSlug,
projectId,
issueId,
disabled,
swrIssueDescription,
initialValue,
issueOperations,
setIsSubmitting,
placeholder,
} = props;
// refs
const editorRef = useRef<EditorRefApi>(null);
// store hooks
const { getWorkspaceBySlug } = useWorkspace();
// derived values
const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id?.toString() ?? "";
// use issue description
const { descriptionBinary, resolveConflictsAndUpdateDescription } = useIssueDescription({
descriptionBinary: savedDescriptionBinary,
descriptionHTML,
updateDescription,
const { handleSubmit, reset, control } = useForm<TIssue>({
defaultValues: {
description_html: initialValue,
},
});
const debouncedDescriptionSave = useCallback(
debounce(async (updatedDescription: Uint8Array) => {
const editor = editorRef.current;
if (!editor) return;
const encodedDescription = convertBinaryDataToBase64String(updatedDescription);
await resolveConflictsAndUpdateDescription(encodedDescription, editor);
setIsSubmitting("submitted");
}, 1500),
[]
const [localIssueDescription, setLocalIssueDescription] = useState({
id: issueId,
description_html: initialValue,
});
const handleDescriptionFormSubmit = useCallback(
async (formData: Partial<TIssue>) => {
await issueOperations.update(workspaceSlug, projectId, issueId, {
description_html: formData.description_html ?? "<p></p>",
});
},
[workspaceSlug, projectId, issueId, issueOperations]
);
if (!descriptionBinary)
return (
<Loader className="min-h-[120px] max-h-64 space-y-2 overflow-hidden rounded-md">
<Loader.Item width="100%" height="26px" />
<div className="flex items-center gap-2">
<Loader.Item width="26px" height="26px" />
<Loader.Item width="400px" height="26px" />
</div>
<div className="flex items-center gap-2">
<Loader.Item width="26px" height="26px" />
<Loader.Item width="400px" height="26px" />
</div>
<Loader.Item width="80%" height="26px" />
<div className="flex items-center gap-2">
<Loader.Item width="50%" height="26px" />
</div>
<div className="border-0.5 absolute bottom-2 right-3.5 z-10 flex items-center gap-2">
<Loader.Item width="100px" height="26px" />
<Loader.Item width="50px" height="26px" />
</div>
</Loader>
);
const { getWorkspaceBySlug } = useWorkspace();
// computed values
const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id as string;
// reset form values
useEffect(() => {
if (!issueId) return;
reset({
id: issueId,
description_html: initialValue === "" ? "<p></p>" : initialValue,
});
setLocalIssueDescription({
id: issueId,
description_html: initialValue === "" ? "<p></p>" : initialValue,
});
}, [initialValue, issueId, reset]);
// ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
// TODO: Verify the exhaustive-deps warning
// eslint-disable-next-line react-hooks/exhaustive-deps
const debouncedFormSave = useCallback(
debounce(async () => {
handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
}, 1500),
[handleSubmit, issueId]
);
return (
<>
{!disabled ? (
<CollaborativeRichTextEditor
key={issueId}
containerClassName={containerClassName}
value={descriptionBinary}
onChange={(val) => {
setIsSubmitting("submitting");
debouncedDescriptionSave(val);
}}
dragDropEnabled
id={issueId}
placeholder={placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)}
projectId={projectId}
ref={editorRef}
uploadFile={async (file) => {
try {
const { asset_id } = await fileService.uploadProjectAsset(
workspaceSlug,
projectId,
{
entity_identifier: issueId,
entity_type: EFileAssetType.ISSUE_DESCRIPTION,
},
file
);
return asset_id;
} catch (error) {
console.log("Error in uploading issue asset:", error);
throw new Error("Asset upload failed. Please try again later.");
}
}}
workspaceId={workspaceId}
workspaceSlug={workspaceSlug}
{localIssueDescription.description_html ? (
<Controller
name="description_html"
control={control}
render={({ field: { onChange } }) =>
!disabled ? (
<RichTextEditor
id={issueId}
initialValue={localIssueDescription.description_html ?? "<p></p>"}
value={swrIssueDescription ?? null}
workspaceSlug={workspaceSlug}
workspaceId={workspaceId}
projectId={projectId}
dragDropEnabled
onChange={(_description: object, description_html: string) => {
setIsSubmitting("submitting");
onChange(description_html);
debouncedFormSave();
}}
placeholder={
placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)
}
containerClassName={containerClassName}
uploadFile={async (file) => {
try {
const { asset_id } = await fileService.uploadProjectAsset(
workspaceSlug,
projectId,
{
entity_identifier: issueId,
entity_type: EFileAssetType.ISSUE_DESCRIPTION,
},
file
);
return asset_id;
} catch (error) {
console.log("Error in uploading issue asset:", error);
throw new Error("Asset upload failed. Please try again later.");
}
}}
/>
) : (
<RichTextReadOnlyEditor
id={issueId}
initialValue={localIssueDescription.description_html ?? ""}
containerClassName={containerClassName}
workspaceSlug={workspaceSlug}
projectId={projectId}
/>
)
}
/>
) : (
<CollaborativeRichTextReadOnlyEditor
containerClassName={containerClassName}
descriptionBinary={savedDescriptionBinary}
descriptionHTML={descriptionHTML}
id={issueId}
projectId={projectId}
workspaceSlug={workspaceSlug}
/>
<Loader>
<Loader.Item height="150px" />
</Loader>
)}
</>
);

27
web/core/components/issues/issue-detail/main-content.tsx
View file

@ -22,7 +22,6 @@ import useSize from "@/hooks/use-window-size";
// plane web components
import { DeDupeIssuePopoverRoot } from "@/plane-web/components/de-dupe";
import { IssueTypeSwitcher } from "@/plane-web/components/issues";
// plane web hooks
import { useDebouncedDuplicateIssues } from "@/plane-web/hooks/use-debounced-duplicate-issues";
// types
import { TIssueOperations } from "./root";
@ -114,22 +113,16 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
containerClassName="-ml-3"
/>
{issue.description_binary !== undefined && (
<IssueDescriptionInput
key={issue.id}
containerClassName="-ml-3 border-none"
descriptionBinary={issue.description_binary}
descriptionHTML={issue.description_html ?? "<p></p>"}
disabled={!isEditable}
updateDescription={async (data) =>
await issueOperations.updateDescription(workspaceSlug, issue.project_id ?? "", issue.id, data)
}
issueId={issue.id}
projectId={issue.project_id}
setIsSubmitting={(value) => setIsSubmitting(value)}
workspaceSlug={workspaceSlug}
/>
)}
<IssueDescriptionInput
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
issueId={issue.id}
initialValue={issue.description_html}
disabled={!isEditable}
issueOperations={issueOperations}
setIsSubmitting={(value) => setIsSubmitting(value)}
containerClassName="-ml-3 border-none"
/>
{currentUser && (
<IssueReaction

15
web/core/components/issues/issue-detail/root.tsx
View file

@ -26,12 +26,6 @@ import { IssueDetailsSidebar } from "./sidebar";
export type TIssueOperations = {
fetch: (workspaceSlug: string, projectId: string, issueId: string, loader?: boolean) => Promise<void>;
update: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
updateDescription: (
workspaceSlug: string,
projectId: string,
issueId: string,
descriptionBinary: string
) => Promise<ArrayBuffer>;
remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
archive?: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
restore?: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@ -70,7 +64,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
issue: { getIssueById },
fetchIssue,
updateIssue,
updateIssueDescription,
removeIssue,
archiveIssue,
addCycleToIssue,
@ -125,13 +118,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
});
}
},
updateDescription: async (workspaceSlug, projectId, issueId, descriptionBinary) => {
try {
return await updateIssueDescription(workspaceSlug, projectId, issueId, descriptionBinary);
} catch {
throw new Error("Failed to update issue description");
}
},
remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
@ -331,7 +317,6 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
is_archived,
fetchIssue,
updateIssue,
updateIssueDescription,
removeIssue,
archiveIssue,
removeArchivedIssue,

36
web/core/components/issues/peek-overview/issue-detail.tsx
View file

@ -12,9 +12,8 @@ import useReloadConfirmations from "@/hooks/use-reload-confirmation";
// plane web components
import { DeDupeIssuePopoverRoot } from "@/plane-web/components/de-dupe";
import { IssueTypeSwitcher } from "@/plane-web/components/issues";
// plane web hooks
import { useDebouncedDuplicateIssues } from "@/plane-web/hooks/use-debounced-duplicate-issues";
// local components
import { useDebouncedDuplicateIssues } from "@/plane-web/hooks/use-debounced-duplicate-issues";
import { IssueDescriptionInput } from "../description-input";
import { IssueReaction } from "../issue-detail/reactions";
import { IssueTitleInput } from "../title-input";
@ -64,6 +63,13 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
if (!issue || !issue.project_id) return <></>;
const issueDescription =
issue.description_html !== undefined || issue.description_html !== null
? issue.description_html != ""
? issue.description_html
: "<p></p>"
: undefined;
return (
<div className="space-y-2">
{issue.parent_id && (
@ -99,22 +105,16 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
containerClassName="-ml-3"
/>
{issue.description_binary !== undefined && (
<IssueDescriptionInput
key={issue.id}
containerClassName="-ml-3 border-none"
descriptionBinary={issue.description_binary}
descriptionHTML={issue.description_html ?? "<p></p>"}
disabled={disabled}
updateDescription={async (data) =>
await issueOperations.updateDescription(workspaceSlug, issue.project_id ?? "", issue.id, data)
}
issueId={issue.id}
projectId={issue.project_id}
setIsSubmitting={(value) => setIsSubmitting(value)}
workspaceSlug={workspaceSlug}
/>
)}
<IssueDescriptionInput
workspaceSlug={workspaceSlug}
projectId={issue.project_id}
issueId={issue.id}
initialValue={issueDescription}
disabled={disabled}
issueOperations={issueOperations}
setIsSubmitting={(value) => setIsSubmitting(value)}
containerClassName="-ml-3 border-none"
/>
{currentUser && (
<IssueReaction

23
web/core/components/issues/peek-overview/root.tsx
View file

@ -39,7 +39,6 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
setPeekIssue,
issue: { fetchIssue, getIsFetchingIssueDetails },
fetchActivities,
updateIssueDescription,
} = useIssueDetail();
const { issues } = useIssuesStore();
@ -93,16 +92,6 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
});
}
},
updateDescription: async (workspaceSlug, projectId, issueId, descriptionBinary) => {
if (!workspaceSlug || !projectId || !issueId) {
throw new Error("Required fields missing while updating binary description");
}
try {
return await updateIssueDescription(workspaceSlug, projectId, issueId, descriptionBinary);
} catch {
throw new Error("Failed to update issue description");
}
},
remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
try {
return issues?.removeIssue(workspaceSlug, projectId, issueId).then(() => {
@ -329,17 +318,7 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
}
},
}),
[
fetchIssue,
is_draft,
issues,
fetchActivities,
captureIssueEvent,
pathname,
removeRoutePeekId,
restoreIssue,
updateIssueDescription,
]
[fetchIssue, is_draft, issues, fetchActivities, captureIssueEvent, pathname, removeRoutePeekId, restoreIssue]
);
useEffect(() => {

4
web/core/components/pages/editor/page-root.tsx
View file

@ -50,9 +50,7 @@ export const PageRoot = observer((props: TPageRootProps) => {
usePageFallback({
editorRef,
fetchPageDescription: async () => {
if (!page.id) {
throw new Error("Required fields missing while fetching binary description");
}
if (!page.id) return;
return await projectPageService.fetchDescriptionBinary(workspaceSlug, projectId, page.id);
},
hasConnectionFailed,

2
web/core/components/profile/activity/activity-list.tsx
View file

@ -8,7 +8,7 @@ import { IUserActivityResponse } from "@plane/types";
// components
import { ActivityIcon, ActivityMessage, IssueLink } from "@/components/core";
// editor
import { RichTextReadOnlyEditor } from "@/components/editor";
import { RichTextReadOnlyEditor } from "@/components/editor/rich-text-editor/rich-text-read-only-editor";
// ui
import { ActivitySettingsLoader } from "@/components/ui";
// helpers

2
web/core/components/profile/activity/profile-activity-list.tsx
View file

@ -7,7 +7,7 @@ import useSWR from "swr";
import { History, MessageSquare } from "lucide-react";
// hooks
import { ActivityIcon, ActivityMessage, IssueLink } from "@/components/core";
import { RichTextReadOnlyEditor } from "@/components/editor";
import { RichTextReadOnlyEditor } from "@/components/editor/rich-text-editor/rich-text-read-only-editor";
import { ActivitySettingsLoader } from "@/components/ui";
// constants
import { USER_ACTIVITY } from "@/constants/fetch-keys";

54
web/core/hooks/use-issue-description.ts
View file

@ -1,54 +0,0 @@
import { useCallback, useEffect, useState } from "react";
// plane editor
import {
convertBase64StringToBinaryData,
EditorRefApi,
getBinaryDataFromRichTextEditorHTMLString,
} from "@plane/editor";
type TArgs = {
descriptionBinary: string | null;
descriptionHTML: string | null;
updateDescription?: (data: string) => Promise<ArrayBuffer>;
};
export const useIssueDescription = (args: TArgs) => {
const { descriptionBinary: savedDescriptionBinary, descriptionHTML, updateDescription } = args;
// states
const [descriptionBinary, setDescriptionBinary] = useState<Uint8Array | null>(null);
// update description
const resolveConflictsAndUpdateDescription = useCallback(
async (encodedDescription: string, editorRef: EditorRefApi | null) => {
if (!updateDescription) return;
try {
const conflictFreeEncodedDescription = await updateDescription(encodedDescription);
const decodedDescription = conflictFreeEncodedDescription
? new Uint8Array(conflictFreeEncodedDescription)
: new Uint8Array();
editorRef?.setProviderDocument(decodedDescription);
} catch (error) {
console.error("Error while updating description", error);
}
},
[updateDescription]
);
useEffect(() => {
if (descriptionBinary) return;
if (savedDescriptionBinary) {
const savedDescriptionBuffer = convertBase64StringToBinaryData(savedDescriptionBinary);
const decodedSavedDescription = savedDescriptionBuffer
? new Uint8Array(savedDescriptionBuffer)
: new Uint8Array();
setDescriptionBinary(decodedSavedDescription);
} else {
const decodedDescriptionHTML = getBinaryDataFromRichTextEditorHTMLString(descriptionHTML ?? "<p></p>");
setDescriptionBinary(decodedDescriptionHTML);
}
}, [descriptionBinary, descriptionHTML, savedDescriptionBinary]);
return {
descriptionBinary,
resolveConflictsAndUpdateDescription,
};
};

6
web/core/hooks/use-page-fallback.ts
View file

@ -1,6 +1,6 @@
import { useCallback, useEffect } from "react";
// plane editor
import { convertBinaryDataToBase64String, EditorRefApi } from "@plane/editor";
import { EditorRefApi } from "@plane/editor";
// plane types
import { TDocumentPayload } from "@plane/types";
// hooks
@ -8,7 +8,7 @@ import useAutoSave from "@/hooks/use-auto-save";
type TArgs = {
editorRef: React.RefObject<EditorRefApi>;
fetchPageDescription: () => Promise<ArrayBuffer>;
fetchPageDescription: () => Promise<any>;
hasConnectionFailed: boolean;
updatePageDescription: (data: TDocumentPayload) => Promise<void>;
};
@ -29,7 +29,7 @@ export const usePageFallback = (args: TArgs) => {
editor.setProviderDocument(latestDecodedDescription);
const { binary, html, json } = editor.getDocument();
if (!binary || !json) return;
const encodedBinary = convertBinaryDataToBase64String(binary);
const encodedBinary = Buffer.from(binary).toString("base64");
await updatePageDescription({
description_binary: encodedBinary,

21
web/core/services/inbox/inbox-issue.service.ts
View file

@ -1,5 +1,5 @@
// types
import type { TInboxIssue, TIssue, TInboxIssueWithPagination, TInboxForm, TDocumentPayload } from "@plane/types";
import type { TInboxIssue, TIssue, TInboxIssueWithPagination, TInboxForm } from "@plane/types";
import { API_BASE_URL } from "@/helpers/common.helper";
import { APIService } from "@/services/api.service";
// helpers
@ -76,25 +76,6 @@ export class InboxIssueService extends APIService {
});
}
async updateDescriptionBinary(
workspaceSlug: string,
projectId: string,
inboxIssueId: string,
data: Pick<TDocumentPayload, "description_binary">
): Promise<ArrayBuffer> {
return this.post(
`/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/${inboxIssueId}/description/`,
data,
{
responseType: "arraybuffer",
}
)
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
async retrievePublishForm(workspaceSlug: string, projectId: string): Promise<TInboxForm> {
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/intake-settings/`)
.then((response) => response?.data)

16
web/core/services/issue/issue.service.ts
View file

@ -4,7 +4,6 @@ import isEmpty from "lodash/isEmpty";
import type {
IIssueDisplayProperties,
TBulkOperationsPayload,
TDocumentPayload,
TIssue,
TIssueActivity,
TIssueLink,
@ -389,19 +388,4 @@ export class IssueService extends APIService {
throw error?.response?.data;
});
}
async updateDescriptionBinary(
workspaceSlug: string,
projectId: string,
issueId: string,
data: Pick<TDocumentPayload, "description_binary">
): Promise<ArrayBuffer> {
return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/description/`, data, {
responseType: "arraybuffer",
})
.then((response) => response?.data)
.catch((error) => {
throw error?.response?.data;
});
}
}

7
web/core/services/page/project-page.service.ts
View file

@ -4,10 +4,15 @@ import { TDocumentPayload, TPage } from "@plane/types";
import { API_BASE_URL } from "@/helpers/common.helper";
// services
import { APIService } from "@/services/api.service";
import { FileUploadService } from "@/services/file-upload.service";
export class ProjectPageService extends APIService {
private fileUploadService: FileUploadService;
constructor() {
super(API_BASE_URL);
// upload service
this.fileUploadService = new FileUploadService();
}
async fetchAll(workspaceSlug: string, projectId: string): Promise<TPage[]> {
@ -128,7 +133,7 @@ export class ProjectPageService extends APIService {
});
}
async fetchDescriptionBinary(workspaceSlug: string, projectId: string, pageId: string): Promise<ArrayBuffer> {
async fetchDescriptionBinary(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, {
headers: {
"Content-Type": "application/octet-stream",

22
web/core/store/inbox/inbox-issue.store.ts
View file

@ -26,7 +26,6 @@ export interface IInboxIssueStore {
updateInboxIssueDuplicateTo: (issueId: string) => Promise<void>; // connecting the inbox issue to the project existing issue
updateInboxIssueSnoozeTill: (date: Date | undefined) => Promise<void>; // snooze the issue
updateIssue: (issue: Partial<TIssue>) => Promise<void>; // updating the issue
updateIssueDescription: (descriptionBinary: string) => Promise<ArrayBuffer>; // updating the local issue description
updateProjectIssue: (issue: Partial<TIssue>) => Promise<void>; // updating the issue
fetchIssueActivity: () => Promise<void>; // fetching the issue activity
}
@ -79,7 +78,6 @@ export class InboxIssueStore implements IInboxIssueStore {
updateInboxIssueDuplicateTo: action,
updateInboxIssueSnoozeTill: action,
updateIssue: action,
updateIssueDescription: action,
updateProjectIssue: action,
fetchIssueActivity: action,
});
@ -177,26 +175,6 @@ export class InboxIssueStore implements IInboxIssueStore {
}
};
updateIssueDescription = async (descriptionBinary: string): Promise<ArrayBuffer> => {
try {
if (!this.issue.id) throw new Error("Issue id is missing");
const res = await this.inboxIssueService.updateDescriptionBinary(
this.workspaceSlug,
this.projectId,
this.issue.id,
{
description_binary: descriptionBinary,
}
);
set(this.issue, "description_binary", descriptionBinary);
// fetching activity
this.fetchIssueActivity();
return res;
} catch {
throw new Error("Failed to update local issue description");
}
};
updateProjectIssue = async (issue: Partial<TIssue>) => {
const inboxIssue = clone(this.issue);
try {

30
web/core/store/issue/issue-details/issue.store.ts
View file

@ -7,7 +7,6 @@ import { persistence } from "@/local-db/storage.sqlite";
// services
import { IssueArchiveService, IssueDraftService, IssueService } from "@/services/issue";
// types
import { IIssueRootStore } from "../root.store";
import { IIssueDetail } from "./root.store";
export interface IIssueStoreActions {
@ -16,15 +15,9 @@ export interface IIssueStoreActions {
workspaceSlug: string,
projectId: string,
issueId: string,
issueStatus?: "DEFAULT" | "DRAFT"
issueStatus?: "DEFAULT" | "DRAFT",
) => Promise<TIssue>;
updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
updateIssueDescription: (
workspaceSlug: string,
projectId: string,
issueId: string,
descriptionBinary: string
) => Promise<ArrayBuffer>;
removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
addCycleToIssue: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
@ -51,21 +44,19 @@ export class IssueStore implements IIssueStore {
fetchingIssueDetails: string | undefined = undefined;
localDBIssueDescription: string | undefined = undefined;
// root store
rootIssueStore: IIssueRootStore;
rootIssueDetailStore: IIssueDetail;
// services
issueService;
issueArchiveService;
issueDraftService;
constructor(rootStore: IIssueRootStore, rootIssueDetailStore: IIssueDetail) {
constructor(rootStore: IIssueDetail) {
makeObservable(this, {
fetchingIssueDetails: observable.ref,
localDBIssueDescription: observable.ref,
});
// root store
this.rootIssueStore = rootStore;
this.rootIssueDetailStore = rootIssueDetailStore;
this.rootIssueDetailStore = rootStore;
// services
this.issueService = new IssueService();
this.issueArchiveService = new IssueArchiveService();
@ -165,7 +156,6 @@ export class IssueStore implements IIssueStore {
id: issue?.id,
sequence_id: issue?.sequence_id,
name: issue?.name,
description_binary: issue?.description_binary,
description_html: issue?.description_html,
sort_order: issue?.sort_order,
state_id: issue?.state_id,
@ -204,20 +194,6 @@ export class IssueStore implements IIssueStore {
await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
};
updateIssueDescription = async (
workspaceSlug: string,
projectId: string,
issueId: string,
descriptionBinary: string
): Promise<ArrayBuffer> => {
const res = await this.issueService.updateDescriptionBinary(workspaceSlug, projectId, issueId, {
description_binary: descriptionBinary,
});
this.rootIssueStore.issues.updateIssue(issueId, { description_binary: descriptionBinary });
this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
return res;
};
removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
this.rootIssueDetailStore.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);

8
web/core/store/issue/issue-details/root.store.ts
View file

@ -192,7 +192,7 @@ export class IssueDetail implements IIssueDetail {
// store
this.rootIssueStore = rootStore;
this.issue = new IssueStore(rootStore, this);
this.issue = new IssueStore(this);
this.reaction = new IssueReactionStore(this);
this.attachment = new IssueAttachmentStore(rootStore);
this.activity = new IssueActivityStore(rootStore.rootStore as RootStore);
@ -257,12 +257,6 @@ export class IssueDetail implements IIssueDetail {
) => this.issue.fetchIssue(workspaceSlug, projectId, issueId, issueStatus);
updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) =>
this.issue.updateIssue(workspaceSlug, projectId, issueId, data);
updateIssueDescription = async (
workspaceSlug: string,
projectId: string,
issueId: string,
descriptionBinary: string
) => this.issue.updateIssueDescription(workspaceSlug, projectId, issueId, descriptionBinary);
removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
this.issue.removeIssue(workspaceSlug, projectId, issueId);
archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>