+
+
+
+
+
+
\ No newline at end of file
diff --git a/deploy/1-click/install.sh b/deploy/1-click/install.sh
new file mode 100644
index 00000000000..f32be504d0f
--- /dev/null
+++ b/deploy/1-click/install.sh
@@ -0,0 +1,16 @@
+#!/bin/bash
+
+if command -v curl &> /dev/null; then
+ sudo curl -sSL \
+ -o /usr/local/bin/plane-app \
+ https://raw.githubusercontent.com/makeplane/plane/${BRANCH:-master}/deploy/1-click/plane-app?token=$(date +%s)
+else
+ sudo wget -q \
+ -O /usr/local/bin/plane-app \
+ https://raw.githubusercontent.com/makeplane/plane/${BRANCH:-master}/deploy/1-click/plane-app?token=$(date +%s)
+fi
+
+sudo chmod +x /usr/local/bin/plane-app
+sudo sed -i 's/export BRANCH=${BRANCH:-master}/export BRANCH='${BRANCH:-master}'/' /usr/local/bin/plane-app
+
+sudo plane-app --help
\ No newline at end of file
diff --git a/deploy/1-click/plane-app b/deploy/1-click/plane-app
new file mode 100644
index 00000000000..445f39d697e
--- /dev/null
+++ b/deploy/1-click/plane-app
@@ -0,0 +1,713 @@
+#!/bin/bash
+
+function print_header() {
+clear
+
+cat <<"EOF"
+---------------------------------------
+ ____ _
+| _ \| | __ _ _ __ ___
+| |_) | |/ _` | '_ \ / _ \
+| __/| | (_| | | | | __/
+|_| |_|\__,_|_| |_|\___|
+
+---------------------------------------
+Project management tool from the future
+---------------------------------------
+
+EOF
+}
+function update_env_files() {
+ config_file=$1
+ key=$2
+ value=$3
+
+ # Check if the config file exists
+ if [ ! -f "$config_file" ]; then
+ echo "Config file not found. Creating a new one..." >&2
+ touch "$config_file"
+ fi
+
+ # Check if the key already exists in the config file
+ if grep -q "^$key=" "$config_file"; then
+ awk -v key="$key" -v value="$value" -F '=' '{if ($1 == key) $2 = value} 1' OFS='=' "$config_file" > "$config_file.tmp" && mv "$config_file.tmp" "$config_file"
+ else
+ echo "$key=$value" >> "$config_file"
+ fi
+}
+function read_env_file() {
+ config_file=$1
+ key=$2
+
+ # Check if the config file exists
+ if [ ! -f "$config_file" ]; then
+ echo "Config file not found. Creating a new one..." >&2
+ touch "$config_file"
+ fi
+
+ # Check if the key already exists in the config file
+ if grep -q "^$key=" "$config_file"; then
+ value=$(awk -v key="$key" -F '=' '{if ($1 == key) print $2}' "$config_file")
+ echo "$value"
+ else
+ echo ""
+ fi
+}
+function update_config() {
+ config_file="$PLANE_INSTALL_DIR/config.env"
+ update_env_files "$config_file" "$1" "$2"
+}
+function read_config() {
+ config_file="$PLANE_INSTALL_DIR/config.env"
+ read_env_file "$config_file" "$1"
+}
+function update_env() {
+ config_file="$PLANE_INSTALL_DIR/.env"
+ update_env_files "$config_file" "$1" "$2"
+}
+function read_env() {
+ config_file="$PLANE_INSTALL_DIR/.env"
+ read_env_file "$config_file" "$1"
+}
+function show_message() {
+ print_header
+
+ if [ "$2" == "replace_last_line" ]; then
+ PROGRESS_MSG[-1]="$1"
+ else
+ PROGRESS_MSG+=("$1")
+ fi
+
+ for statement in "${PROGRESS_MSG[@]}"; do
+ echo "$statement"
+ done
+
+}
+function prepare_environment() {
+ show_message "Prepare Environment..." >&2
+
+ show_message "- Updating OS with required tools ✋" >&2
+ sudo apt-get update -y &> /dev/null
+ sudo apt-get upgrade -y &> /dev/null
+
+ required_tools=("curl" "awk" "wget" "nano" "dialog" "git")
+
+ for tool in "${required_tools[@]}"; do
+ if ! command -v $tool &> /dev/null; then
+ sudo apt install -y $tool &> /dev/null
+ fi
+ done
+
+ show_message "- OS Updated ✅" "replace_last_line" >&2
+
+ # Install Docker if not installed
+ if ! command -v docker &> /dev/null; then
+ show_message "- Installing Docker ✋" >&2
+ sudo curl -o- https://get.docker.com | bash -
+
+ if [ "$EUID" -ne 0 ]; then
+ dockerd-rootless-setuptool.sh install &> /dev/null
+ fi
+ show_message "- Docker Installed ✅" "replace_last_line" >&2
+ else
+ show_message "- Docker is already installed ✅" >&2
+ fi
+
+ update_config "PLANE_ARCH" "$CPU_ARCH"
+ update_config "DOCKER_VERSION" "$(docker -v | awk '{print $3}' | sed 's/,//g')"
+ update_config "PLANE_DATA_DIR" "$DATA_DIR"
+ update_config "PLANE_LOG_DIR" "$LOG_DIR"
+
+ # echo "TRUE"
+ echo "Environment prepared successfully ✅"
+ show_message "Environment prepared successfully ✅" >&2
+ show_message "" >&2
+ return 0
+}
+function download_plane() {
+ # Download Docker Compose File from github url
+ show_message "Downloading Plane Setup Files ✋" >&2
+ curl -H 'Cache-Control: no-cache, no-store' \
+ -s -o $PLANE_INSTALL_DIR/docker-compose.yaml \
+ https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/docker-compose.yml?$(date +%s)
+
+ curl -H 'Cache-Control: no-cache, no-store' \
+ -s -o $PLANE_INSTALL_DIR/variables-upgrade.env \
+ https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/variables.env?$(date +%s)
+
+ # if .env does not exists rename variables-upgrade.env to .env
+ if [ ! -f "$PLANE_INSTALL_DIR/.env" ]; then
+ mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
+ fi
+
+ show_message "Plane Setup Files Downloaded ✅" "replace_last_line" >&2
+ show_message "" >&2
+
+ echo "PLANE_DOWNLOADED"
+ return 0
+}
+function printUsageInstructions() {
+ show_message "" >&2
+ show_message "----------------------------------" >&2
+ show_message "Usage Instructions" >&2
+ show_message "----------------------------------" >&2
+ show_message "" >&2
+ show_message "To use the Plane Setup utility, use below commands" >&2
+ show_message "" >&2
+
+ show_message "Usage: plane-app [OPTION]" >&2
+ show_message "" >&2
+ show_message " start Start Server" >&2
+ show_message " stop Stop Server" >&2
+ show_message " restart Restart Server" >&2
+ show_message "" >&2
+ show_message "other options" >&2
+ show_message " -i, --install Install Plane" >&2
+ show_message " -c, --configure Configure Plane" >&2
+ show_message " -up, --upgrade Upgrade Plane" >&2
+ show_message " -un, --uninstall Uninstall Plane" >&2
+ show_message " -ui, --update-installer Update Plane Installer" >&2
+ show_message " -h, --help Show help" >&2
+ show_message "" >&2
+ show_message "" >&2
+ show_message "Application Data is stored in mentioned folders" >&2
+ show_message " - DB Data: $DATA_DIR/postgres" >&2
+ show_message " - Redis Data: $DATA_DIR/redis" >&2
+ show_message " - Minio Data: $DATA_DIR/minio" >&2
+ show_message "" >&2
+ show_message "" >&2
+ show_message "----------------------------------" >&2
+ show_message "" >&2
+}
+function build_local_image() {
+ show_message "- Downloading Plane Source Code ✋" >&2
+ REPO=https://github.com/makeplane/plane.git
+ CURR_DIR=$PWD
+ PLANE_TEMP_CODE_DIR=$PLANE_INSTALL_DIR/temp
+ sudo rm -rf $PLANE_TEMP_CODE_DIR > /dev/null
+
+ sudo git clone $REPO $PLANE_TEMP_CODE_DIR --branch $BRANCH --single-branch -q > /dev/null
+
+ sudo cp $PLANE_TEMP_CODE_DIR/deploy/selfhost/build.yml $PLANE_TEMP_CODE_DIR/build.yml
+
+ show_message "- Plane Source Code Downloaded ✅" "replace_last_line" >&2
+
+ show_message "- Building Docker Images ✋" >&2
+ sudo docker compose --env-file=$PLANE_INSTALL_DIR/.env -f $PLANE_TEMP_CODE_DIR/build.yml build --no-cache
+}
+function check_for_docker_images() {
+ show_message "" >&2
+ # show_message "Building Plane Images" >&2
+
+ update_env "DOCKERHUB_USER" "makeplane"
+ update_env "PULL_POLICY" "always"
+ CURR_DIR=$(pwd)
+
+ if [ "$BRANCH" == "master" ]; then
+ update_env "APP_RELEASE" "latest"
+ export APP_RELEASE=latest
+ else
+ update_env "APP_RELEASE" "$BRANCH"
+ export APP_RELEASE=$BRANCH
+ fi
+
+ if [ $CPU_ARCH == "amd64" ] || [ $CPU_ARCH == "x86_64" ]; then
+ # show_message "Building Plane Images for $CPU_ARCH is not required. Skipping... ✅" "replace_last_line" >&2
+ echo "Building Plane Images for $CPU_ARCH is not required. Skipping..."
+ else
+ export DOCKERHUB_USER=myplane
+ show_message "Building Plane Images for $CPU_ARCH " >&2
+ update_env "DOCKERHUB_USER" "myplane"
+ update_env "PULL_POLICY" "never"
+
+ build_local_image
+
+ sudo rm -rf $PLANE_INSTALL_DIR/temp > /dev/null
+
+ show_message "- Docker Images Built ✅" "replace_last_line" >&2
+ sudo cd $CURR_DIR
+ fi
+
+ sudo sed -i "s|- pgdata:|- $DATA_DIR/postgres:|g" $PLANE_INSTALL_DIR/docker-compose.yaml
+ sudo sed -i "s|- redisdata:|- $DATA_DIR/redis:|g" $PLANE_INSTALL_DIR/docker-compose.yaml
+ sudo sed -i "s|- uploads:|- $DATA_DIR/minio:|g" $PLANE_INSTALL_DIR/docker-compose.yaml
+
+ show_message "Downloading Plane Images for $CPU_ARCH ✋" >&2
+ docker compose -f $PLANE_INSTALL_DIR/docker-compose.yaml --env-file=$PLANE_INSTALL_DIR/.env pull
+ show_message "Plane Images Downloaded ✅" "replace_last_line" >&2
+}
+function configure_plane() {
+ show_message "" >&2
+ show_message "Configuring Plane" >&2
+ show_message "" >&2
+
+ exec 3>&1
+
+ nginx_port=$(read_env "NGINX_PORT")
+ domain_name=$(read_env "DOMAIN_NAME")
+ upload_limit=$(read_env "FILE_SIZE_LIMIT")
+
+ NGINX_SETTINGS=$(dialog \
+ --ok-label "Next" \
+ --cancel-label "Skip" \
+ --backtitle "Plane Configuration" \
+ --title "Nginx Settings" \
+ --form "" \
+ 0 0 0 \
+ "Port:" 1 1 "${nginx_port:-80}" 1 10 50 0 \
+ "Domain:" 2 1 "${domain_name:-localhost}" 2 10 50 0 \
+ "Upload Limit:" 3 1 "${upload_limit:-5242880}" 3 10 15 0 \
+ 2>&1 1>&3)
+
+ save_nginx_settings=0
+ if [ $? -eq 0 ]; then
+ save_nginx_settings=1
+ nginx_port=$(echo "$NGINX_SETTINGS" | sed -n 1p)
+ domain_name=$(echo "$NGINX_SETTINGS" | sed -n 2p)
+ upload_limit=$(echo "$NGINX_SETTINGS" | sed -n 3p)
+ fi
+
+
+ smtp_host=$(read_env "EMAIL_HOST")
+ smtp_user=$(read_env "EMAIL_HOST_USER")
+ smtp_password=$(read_env "EMAIL_HOST_PASSWORD")
+ smtp_port=$(read_env "EMAIL_PORT")
+ smtp_from=$(read_env "EMAIL_FROM")
+ smtp_tls=$(read_env "EMAIL_USE_TLS")
+ smtp_ssl=$(read_env "EMAIL_USE_SSL")
+
+ SMTP_SETTINGS=$(dialog \
+ --ok-label "Next" \
+ --cancel-label "Skip" \
+ --backtitle "Plane Configuration" \
+ --title "SMTP Settings" \
+ --form "" \
+ 0 0 0 \
+ "Host:" 1 1 "$smtp_host" 1 10 80 0 \
+ "User:" 2 1 "$smtp_user" 2 10 80 0 \
+ "Password:" 3 1 "$smtp_password" 3 10 80 0 \
+ "Port:" 4 1 "${smtp_port:-587}" 4 10 5 0 \
+ "From:" 5 1 "${smtp_from:-Mailer
+
+
+
+
+ |
+
+
+ 
+ |
+
+
+
+
+
+
+
+ {% if actors_involved == 1 %} +
+
+ |
+ + {{ issue.issue_identifier }} updates + ++ {{workspace}}/{{project}}/{{issue.issue_identifier}}: {{ issue.name }} + + |
+
+ {% if actors_involved == 1 %} +
+ {{summary}} + + {{ data.0.actor_detail.first_name}} + {{data.0.actor_detail.last_name}} + . +
+ {% else %} ++ {{summary}} + + {{ data.0.actor_detail.first_name}} + {{data.0.actor_detail.last_name }} + and others. +
+ {% endif %} + + + + {% for update in data %} {% if update.changes.name %} + ++ The issue title has been updated to {{ issue.name}} +
+ {% endif %} + + {% if data %} +
+
+
+ {% endif %}
+
+ {% endfor %} {% if comments.0 %}
+
+
+
+
+
+ + Updates +
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ {% endfor %}
+
+ {% endif %}
+ + Comments +
+ + {% for comment in comments %} +
+ {% if comment.actor_detail.avatar_url %}
+
|
+
+
|
+
+ View issue
+
+
+ |
+
+ This email was sent to
+ {{ receiver.email }}.
+ If you'd rather not receive this kind of email,
+ you can unsubscribe to the issue
+ or
+ manage your email preferences.
+
+
+
+ |
+
+ 
+ 
+ {
- editor?.chain().focus().run();
+ editor?.chain().focus(undefined, { scrollIntoView: false }).run();
+ }}
+ onMouseLeave={() => {
+ hideDragHandle?.();
}}
className={`cursor-text ${editorClassNames}`}
>
diff --git a/packages/editor/core/src/ui/extensions/code-inline/index.tsx b/packages/editor/core/src/ui/extensions/code-inline/index.tsx
new file mode 100644
index 00000000000..1c5d341090b
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/code-inline/index.tsx
@@ -0,0 +1,95 @@
+import { Mark, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
+
+export interface CodeOptions {
+ HTMLAttributes: Record;
+}
+
+declare module "@tiptap/core" {
+ interface Commands {
+ code: {
+ /**
+ * Set a code mark
+ */
+ setCode: () => ReturnType;
+ /**
+ * Toggle inline code
+ */
+ toggleCode: () => ReturnType;
+ /**
+ * Unset a code mark
+ */
+ unsetCode: () => ReturnType;
+ };
+ }
+}
+
+export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/;
+export const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/g;
+
+export const CustomCodeInlineExtension = Mark.create({
+ name: "code",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {
+ class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-[2px] font-mono font-medium text-custom-text-1000",
+ spellcheck: "false",
+ },
+ };
+ },
+
+ excludes: "_",
+
+ code: true,
+
+ exitable: true,
+
+ parseHTML() {
+ return [{ tag: "code" }];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return ["code", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+ },
+
+ addCommands() {
+ return {
+ setCode:
+ () =>
+ ({ commands }) =>
+ commands.setMark(this.name),
+ toggleCode:
+ () =>
+ ({ commands }) =>
+ commands.toggleMark(this.name),
+ unsetCode:
+ () =>
+ ({ commands }) =>
+ commands.unsetMark(this.name),
+ };
+ },
+
+ addKeyboardShortcuts() {
+ return {
+ "Mod-e": () => this.editor.commands.toggleCode(),
+ };
+ },
+
+ addInputRules() {
+ return [
+ markInputRule({
+ find: inputRegex,
+ type: this.type,
+ }),
+ ];
+ },
+
+ addPasteRules() {
+ return [
+ markPasteRule({
+ find: pasteRegex,
+ type: this.type,
+ }),
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/code/index.tsx b/packages/editor/core/src/ui/extensions/code/index.tsx
index 016cec2c31b..64a1740cb29 100644
--- a/packages/editor/core/src/ui/extensions/code/index.tsx
+++ b/packages/editor/core/src/ui/extensions/code/index.tsx
@@ -6,10 +6,61 @@ import ts from "highlight.js/lib/languages/typescript";
const lowlight = createLowlight(common);
lowlight.register("ts", ts);
-export const CustomCodeBlock = CodeBlockLowlight.extend({
+import { Selection } from "@tiptap/pm/state";
+
+export const CustomCodeBlockExtension = CodeBlockLowlight.extend({
addKeyboardShortcuts() {
return {
Tab: ({ editor }) => {
+ const { state } = editor;
+ const { selection } = state;
+ const { $from, empty } = selection;
+
+ if (!empty || $from.parent.type !== this.type) {
+ return false;
+ }
+
+ // Use ProseMirror's insertText transaction to insert the tab character
+ const tr = state.tr.insertText("\t", $from.pos, $from.pos);
+ editor.view.dispatch(tr);
+
+ return true;
+ },
+ ArrowUp: ({ editor }) => {
+ const { state } = editor;
+ const { selection } = state;
+ const { $from, empty } = selection;
+
+ if (!empty || $from.parent.type !== this.type) {
+ return false;
+ }
+
+ const isAtStart = $from.parentOffset === 0;
+
+ if (!isAtStart) {
+ return false;
+ }
+
+ // Check if codeBlock is the first node
+ const isFirstNode = $from.depth === 1 && $from.index($from.depth - 1) === 0;
+
+ if (isFirstNode) {
+ // Insert a new paragraph at the start of the document and move the cursor to it
+ return editor.commands.command(({ tr }) => {
+ const node = editor.schema.nodes.paragraph.create();
+ tr.insert(0, node);
+ tr.setSelection(Selection.near(tr.doc.resolve(1)));
+ return true;
+ });
+ }
+
+ return false;
+ },
+ ArrowDown: ({ editor }) => {
+ if (!this.options.exitOnArrowDown) {
+ return false;
+ }
+
const { state } = editor;
const { selection, doc } = state;
const { $from, empty } = selection;
@@ -18,7 +69,28 @@ export const CustomCodeBlock = CodeBlockLowlight.extend({
return false;
}
- return editor.commands.insertContent(" ");
+ const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+
+ if (!isAtEnd) {
+ return false;
+ }
+
+ const after = $from.after();
+
+ if (after === undefined) {
+ return false;
+ }
+
+ const nodeAfter = doc.nodeAt(after);
+
+ if (nodeAfter) {
+ return editor.commands.command(({ tr }) => {
+ tr.setSelection(Selection.near(doc.resolve(after)));
+ return true;
+ });
+ }
+
+ return editor.commands.exitCode();
},
};
},
diff --git a/packages/editor/core/src/ui/extensions/custom-link/helpers/autolink.ts b/packages/editor/core/src/ui/extensions/custom-link/helpers/autolink.ts
new file mode 100644
index 00000000000..cf67e13d90b
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-link/helpers/autolink.ts
@@ -0,0 +1,118 @@
+import {
+ combineTransactionSteps,
+ findChildrenInRange,
+ getChangedRanges,
+ getMarksBetween,
+ NodeWithPos,
+} from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { find } from "linkifyjs";
+
+type AutolinkOptions = {
+ type: MarkType;
+ validate?: (url: string) => boolean;
+};
+
+export function autolink(options: AutolinkOptions): Plugin {
+ return new Plugin({
+ key: new PluginKey("autolink"),
+ appendTransaction: (transactions, oldState, newState) => {
+ const docChanges = transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
+ const preventAutolink = transactions.some((transaction) => transaction.getMeta("preventAutolink"));
+
+ if (!docChanges || preventAutolink) {
+ return;
+ }
+
+ const { tr } = newState;
+ const transform = combineTransactionSteps(oldState.doc, [...transactions]);
+ const changes = getChangedRanges(transform);
+
+ changes.forEach(({ newRange }) => {
+ // Now let’s see if we can add new links.
+ const nodesInChangedRanges = findChildrenInRange(newState.doc, newRange, (node) => node.isTextblock);
+
+ let textBlock: NodeWithPos | undefined;
+ let textBeforeWhitespace: string | undefined;
+
+ if (nodesInChangedRanges.length > 1) {
+ // Grab the first node within the changed ranges (ex. the first of two paragraphs when hitting enter).
+ textBlock = nodesInChangedRanges[0];
+ textBeforeWhitespace = newState.doc.textBetween(
+ textBlock.pos,
+ textBlock.pos + textBlock.node.nodeSize,
+ undefined,
+ " "
+ );
+ } else if (
+ nodesInChangedRanges.length &&
+ // We want to make sure to include the block seperator argument to treat hard breaks like spaces.
+ newState.doc.textBetween(newRange.from, newRange.to, " ", " ").endsWith(" ")
+ ) {
+ textBlock = nodesInChangedRanges[0];
+ textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, newRange.to, undefined, " ");
+ }
+
+ if (textBlock && textBeforeWhitespace) {
+ const wordsBeforeWhitespace = textBeforeWhitespace.split(" ").filter((s) => s !== "");
+
+ if (wordsBeforeWhitespace.length <= 0) {
+ return false;
+ }
+
+ const lastWordBeforeSpace = wordsBeforeWhitespace[wordsBeforeWhitespace.length - 1];
+ const lastWordAndBlockOffset = textBlock.pos + textBeforeWhitespace.lastIndexOf(lastWordBeforeSpace);
+
+ if (!lastWordBeforeSpace) {
+ return false;
+ }
+
+ find(lastWordBeforeSpace)
+ .filter((link) => link.isLink)
+ // Calculate link position.
+ .map((link) => ({
+ ...link,
+ from: lastWordAndBlockOffset + link.start + 1,
+ to: lastWordAndBlockOffset + link.end + 1,
+ }))
+ // ignore link inside code mark
+ .filter((link) => {
+ if (!newState.schema.marks.code) {
+ return true;
+ }
+
+ return !newState.doc.rangeHasMark(link.from, link.to, newState.schema.marks.code);
+ })
+ // validate link
+ .filter((link) => {
+ if (options.validate) {
+ return options.validate(link.value);
+ }
+ return true;
+ })
+ // Add link mark.
+ .forEach((link) => {
+ if (getMarksBetween(link.from, link.to, newState.doc).some((item) => item.mark.type === options.type)) {
+ return;
+ }
+
+ tr.addMark(
+ link.from,
+ link.to,
+ options.type.create({
+ href: link.href,
+ })
+ );
+ });
+ }
+ });
+
+ if (!tr.steps.length) {
+ return;
+ }
+
+ return tr;
+ },
+ });
+}
diff --git a/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts b/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts
new file mode 100644
index 00000000000..0854092a9e4
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-link/helpers/clickHandler.ts
@@ -0,0 +1,42 @@
+import { getAttributes } from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+type ClickHandlerOptions = {
+ type: MarkType;
+};
+
+export function clickHandler(options: ClickHandlerOptions): Plugin {
+ return new Plugin({
+ key: new PluginKey("handleClickLink"),
+ props: {
+ handleClick: (view, pos, event) => {
+ if (event.button !== 0) {
+ return false;
+ }
+
+ const eventTarget = event.target as HTMLElement;
+
+ if (eventTarget.nodeName !== "A") {
+ return false;
+ }
+
+ const attrs = getAttributes(view.state, options.type.name);
+ const link = event.target as HTMLLinkElement;
+
+ const href = link?.href ?? attrs.href;
+ const target = link?.target ?? attrs.target;
+
+ if (link && href) {
+ if (view.editable) {
+ window.open(href, target);
+ }
+
+ return true;
+ }
+
+ return false;
+ },
+ },
+ });
+}
diff --git a/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts b/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts
new file mode 100644
index 00000000000..83e38054c74
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-link/helpers/pasteHandler.ts
@@ -0,0 +1,52 @@
+import { Editor } from "@tiptap/core";
+import { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { find } from "linkifyjs";
+
+type PasteHandlerOptions = {
+ editor: Editor;
+ type: MarkType;
+};
+
+export function pasteHandler(options: PasteHandlerOptions): Plugin {
+ return new Plugin({
+ key: new PluginKey("handlePasteLink"),
+ props: {
+ handlePaste: (view, event, slice) => {
+ const { state } = view;
+ const { selection } = state;
+ const { empty } = selection;
+
+ if (empty) {
+ return false;
+ }
+
+ let textContent = "";
+
+ slice.content.forEach((node) => {
+ textContent += node.textContent;
+ });
+
+ const link = find(textContent).find((item) => item.isLink && item.value === textContent);
+
+ if (!textContent || !link) {
+ return false;
+ }
+
+ const html = event.clipboardData?.getData("text/html");
+
+ const hrefRegex = /href="([^"]*)"/;
+
+ const existingLink = html?.match(hrefRegex);
+
+ const url = existingLink ? existingLink[1] : link.href;
+
+ options.editor.commands.setMark(options.type, {
+ href: url,
+ });
+
+ return true;
+ },
+ },
+ });
+}
diff --git a/packages/editor/core/src/ui/extensions/custom-link/index.tsx b/packages/editor/core/src/ui/extensions/custom-link/index.tsx
new file mode 100644
index 00000000000..e66d18904f8
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/custom-link/index.tsx
@@ -0,0 +1,219 @@
+import { Mark, markPasteRule, mergeAttributes } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+import { find, registerCustomProtocol, reset } from "linkifyjs";
+
+import { autolink } from "src/ui/extensions/custom-link/helpers/autolink";
+import { clickHandler } from "src/ui/extensions/custom-link/helpers/clickHandler";
+import { pasteHandler } from "src/ui/extensions/custom-link/helpers/pasteHandler";
+
+export interface LinkProtocolOptions {
+ scheme: string;
+ optionalSlashes?: boolean;
+}
+
+export interface LinkOptions {
+ autolink: boolean;
+ inclusive: boolean;
+ protocols: Array;
+ openOnClick: boolean;
+ linkOnPaste: boolean;
+ HTMLAttributes: Record;
+ validate?: (url: string) => boolean;
+}
+
+declare module "@tiptap/core" {
+ interface Commands {
+ link: {
+ setLink: (attributes: {
+ href: string;
+ target?: string | null;
+ rel?: string | null;
+ class?: string | null;
+ }) => ReturnType;
+ toggleLink: (attributes: {
+ href: string;
+ target?: string | null;
+ rel?: string | null;
+ class?: string | null;
+ }) => ReturnType;
+ unsetLink: () => ReturnType;
+ };
+ }
+}
+
+export const CustomLinkExtension = Mark.create({
+ name: "link",
+
+ priority: 1000,
+
+ keepOnSplit: false,
+
+ onCreate() {
+ this.options.protocols.forEach((protocol) => {
+ if (typeof protocol === "string") {
+ registerCustomProtocol(protocol);
+ return;
+ }
+ registerCustomProtocol(protocol.scheme, protocol.optionalSlashes);
+ });
+ },
+
+ onDestroy() {
+ reset();
+ },
+
+ inclusive() {
+ return this.options.inclusive;
+ },
+
+ addOptions() {
+ return {
+ openOnClick: true,
+ linkOnPaste: true,
+ autolink: true,
+ inclusive: false,
+ protocols: [],
+ HTMLAttributes: {
+ target: "_blank",
+ rel: "noopener noreferrer nofollow",
+ class: null,
+ },
+ validate: undefined,
+ };
+ },
+
+ addAttributes() {
+ return {
+ href: {
+ default: null,
+ },
+ target: {
+ default: this.options.HTMLAttributes.target,
+ },
+ rel: {
+ default: this.options.HTMLAttributes.rel,
+ },
+ class: {
+ default: this.options.HTMLAttributes.class,
+ },
+ };
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: "a[href]",
+ getAttrs: (node) => {
+ if (typeof node === "string" || !(node instanceof HTMLElement)) {
+ return null;
+ }
+ const href = node.getAttribute("href")?.toLowerCase() || "";
+ if (href.startsWith("javascript:") || href.startsWith("data:") || href.startsWith("vbscript:")) {
+ return false;
+ }
+ return {};
+ },
+ },
+ ];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ const href = HTMLAttributes.href?.toLowerCase() || "";
+ if (href.startsWith("javascript:") || href.startsWith("data:") || href.startsWith("vbscript:")) {
+ return ["a", mergeAttributes(this.options.HTMLAttributes, { ...HTMLAttributes, href: "" }), 0];
+ }
+ return ["a", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+ },
+
+ addCommands() {
+ return {
+ setLink:
+ (attributes) =>
+ ({ chain }) =>
+ chain().setMark(this.name, attributes).setMeta("preventAutolink", true).run(),
+
+ toggleLink:
+ (attributes) =>
+ ({ chain }) =>
+ chain()
+ .toggleMark(this.name, attributes, { extendEmptyMarkRange: true })
+ .setMeta("preventAutolink", true)
+ .run(),
+
+ unsetLink:
+ () =>
+ ({ chain }) =>
+ chain().unsetMark(this.name, { extendEmptyMarkRange: true }).setMeta("preventAutolink", true).run(),
+ };
+ },
+
+ addPasteRules() {
+ return [
+ markPasteRule({
+ find: (text) =>
+ find(text)
+ .filter((link) => {
+ if (this.options.validate) {
+ return this.options.validate(link.value);
+ }
+ return true;
+ })
+ .filter((link) => link.isLink)
+ .map((link) => ({
+ text: link.value,
+ index: link.start,
+ data: link,
+ })),
+ type: this.type,
+ getAttributes: (match, pasteEvent) => {
+ const html = pasteEvent?.clipboardData?.getData("text/html");
+ const hrefRegex = /href="([^"]*)"/;
+
+ const existingLink = html?.match(hrefRegex);
+
+ if (existingLink) {
+ return {
+ href: existingLink[1],
+ };
+ }
+
+ return {
+ href: match.data?.href,
+ };
+ },
+ }),
+ ];
+ },
+
+ addProseMirrorPlugins() {
+ const plugins: Plugin[] = [];
+
+ if (this.options.autolink) {
+ plugins.push(
+ autolink({
+ type: this.type,
+ validate: this.options.validate,
+ })
+ );
+ }
+
+ if (this.options.openOnClick) {
+ plugins.push(
+ clickHandler({
+ type: this.type,
+ })
+ );
+ }
+
+ if (this.options.linkOnPaste) {
+ plugins.push(
+ pasteHandler({
+ editor: this.editor,
+ type: this.type,
+ })
+ );
+ }
+
+ return plugins;
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx b/packages/editor/core/src/ui/extensions/horizontal-rule.tsx
deleted file mode 100644
index cee0ded8354..00000000000
--- a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { TextSelection } from "prosemirror-state";
-
-import { InputRule, mergeAttributes, Node, nodeInputRule, wrappingInputRule } from "@tiptap/core";
-
-/**
- * Extension based on:
- * - Tiptap HorizontalRule extension (https://tiptap.dev/api/nodes/horizontal-rule)
- */
-
-export interface HorizontalRuleOptions {
- HTMLAttributes: Record;
-}
-
-declare module "@tiptap/core" {
- interface Commands {
- horizontalRule: {
- /**
- * Add a horizontal rule
- */
- setHorizontalRule: () => ReturnType;
- };
- }
-}
-
-export const HorizontalRule = Node.create({
- name: "horizontalRule",
-
- addOptions() {
- return {
- HTMLAttributes: {},
- };
- },
-
- group: "block",
-
- addAttributes() {
- return {
- color: {
- default: "#dddddd",
- },
- };
- },
-
- parseHTML() {
- return [
- {
- tag: `div[data-type="${this.name}"]`,
- },
- ];
- },
-
- renderHTML({ HTMLAttributes }) {
- return [
- "div",
- mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
- "data-type": this.name,
- }),
- ["div", {}],
- ];
- },
-
- addCommands() {
- return {
- setHorizontalRule:
- () =>
- ({ chain }) => {
- return (
- chain()
- .insertContent({ type: this.name })
- // set cursor after horizontal rule
- .command(({ tr, dispatch }) => {
- if (dispatch) {
- const { $to } = tr.selection;
- const posAfter = $to.end();
-
- if ($to.nodeAfter) {
- tr.setSelection(TextSelection.create(tr.doc, $to.pos));
- } else {
- // add node after horizontal rule if it’s the end of the document
- const node = $to.parent.type.contentMatch.defaultType?.create();
-
- if (node) {
- tr.insert(posAfter, node);
- tr.setSelection(TextSelection.create(tr.doc, posAfter));
- }
- }
-
- tr.scrollIntoView();
- }
-
- return true;
- })
- .run()
- );
- },
- };
- },
-
- addInputRules() {
- return [
- new InputRule({
- find: /^(?:---|—-|___\s|\*\*\*\s)$/,
- handler: ({ state, range, match }) => {
- state.tr.replaceRangeWith(range.from, range.to, this.type.create());
- },
- }),
- ];
- },
-});
diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx
index 4ae55f00c06..5bfba3b0f55 100644
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@@ -1,31 +1,31 @@
-import StarterKit from "@tiptap/starter-kit";
-import TiptapLink from "@tiptap/extension-link";
-import TiptapUnderline from "@tiptap/extension-underline";
-import TextStyle from "@tiptap/extension-text-style";
import { Color } from "@tiptap/extension-color";
import TaskItem from "@tiptap/extension-task-item";
import TaskList from "@tiptap/extension-task-list";
+import TextStyle from "@tiptap/extension-text-style";
+import TiptapUnderline from "@tiptap/extension-underline";
+import StarterKit from "@tiptap/starter-kit";
import { Markdown } from "tiptap-markdown";
-import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
import { Table } from "src/ui/extensions/table/table";
import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
+import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
import { TableRow } from "src/ui/extensions/table/table-row/table-row";
-import { HorizontalRule } from "src/ui/extensions/horizontal-rule";
import { ImageExtension } from "src/ui/extensions/image";
import { isValidHttpUrl } from "src/lib/utils";
import { Mentions } from "src/ui/mentions";
+import { CustomCodeBlockExtension } from "src/ui/extensions/code";
+import { ListKeymap } from "src/ui/extensions/custom-list-keymap";
import { CustomKeymap } from "src/ui/extensions/keymap";
-import { CustomCodeBlock } from "src/ui/extensions/code";
import { CustomQuoteExtension } from "src/ui/extensions/quote";
-import { ListKeymap } from "src/ui/extensions/custom-list-keymap";
import { DeleteImage } from "src/types/delete-image";
import { IMentionSuggestion } from "src/types/mention-suggestion";
import { RestoreImage } from "src/types/restore-image";
+import { CustomLinkExtension } from "src/ui/extensions/custom-link";
+import { CustomCodeInlineExtension } from "./code-inline";
export const CoreEditorExtensions = (
mentionConfig: {
@@ -52,14 +52,12 @@ export const CoreEditorExtensions = (
class: "leading-normal -mb-2",
},
},
- code: {
- HTMLAttributes: {
- class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
- spellcheck: "false",
- },
- },
+ code: false,
codeBlock: false,
- horizontalRule: false,
+ horizontalRule: {
+ HTMLAttributes: { class: "mt-4 mb-4" },
+ },
+ blockquote: false,
dropcursor: {
color: "rgba(var(--color-text-100))",
width: 2,
@@ -70,9 +68,12 @@ export const CoreEditorExtensions = (
}),
CustomKeymap,
ListKeymap,
- TiptapLink.configure({
+ CustomLinkExtension.configure({
+ openOnClick: true,
+ autolink: true,
+ linkOnPaste: true,
protocols: ["http", "https"],
- validate: (url) => isValidHttpUrl(url),
+ validate: (url: string) => isValidHttpUrl(url),
HTMLAttributes: {
class:
"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
@@ -91,19 +92,19 @@ export const CoreEditorExtensions = (
class: "not-prose pl-2",
},
}),
- CustomCodeBlock,
TaskItem.configure({
HTMLAttributes: {
class: "flex items-start my-4",
},
nested: true,
}),
+ CustomCodeBlockExtension,
+ CustomCodeInlineExtension,
Markdown.configure({
html: true,
transformCopiedText: true,
transformPastedText: true,
}),
- HorizontalRule,
Table,
TableHeader,
TableCell,
diff --git a/packages/editor/core/src/ui/extensions/quote/index.tsx b/packages/editor/core/src/ui/extensions/quote/index.tsx
index a2c968401db..9dcae6ad7a5 100644
--- a/packages/editor/core/src/ui/extensions/quote/index.tsx
+++ b/packages/editor/core/src/ui/extensions/quote/index.tsx
@@ -1,10 +1,9 @@
-import { isAtStartOfNode } from "@tiptap/core";
import Blockquote from "@tiptap/extension-blockquote";
export const CustomQuoteExtension = Blockquote.extend({
addKeyboardShortcuts() {
return {
- Enter: ({ editor }) => {
+ Enter: () => {
const { $from, $to, $head } = this.editor.state.selection;
const parent = $head.node(-1);
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
index bc42b49ff20..bd96ff1b1d3 100644
--- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -1,5 +1,5 @@
import { h } from "jsx-dom-cjs";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model";
import { Decoration, NodeView } from "@tiptap/pm/view";
import tippy, { Instance, Props } from "tippy.js";
@@ -8,6 +8,12 @@ import { CellSelection, TableMap, updateColumnsOnResize } from "@tiptap/pm/table
import { icons } from "src/ui/extensions/table/table/icons";
+type ToolboxItem = {
+ label: string;
+ icon: string;
+ action: (args: any) => void;
+};
+
export function updateColumns(
node: ProseMirrorNode,
colgroup: HTMLElement,
@@ -75,7 +81,7 @@ const defaultTippyOptions: Partial = {
placement: "right",
};
-function setCellsBackgroundColor(editor: Editor, backgroundColor) {
+function setCellsBackgroundColor(editor: Editor, backgroundColor: string) {
return editor
.chain()
.focus()
@@ -88,7 +94,7 @@ function setCellsBackgroundColor(editor: Editor, backgroundColor) {
.run();
}
-const columnsToolboxItems = [
+const columnsToolboxItems: ToolboxItem[] = [
{
label: "Add Column Before",
icon: icons.insertLeftTableIcon,
@@ -109,7 +115,7 @@ const columnsToolboxItems = [
}: {
editor: Editor;
triggerButton: HTMLElement;
- controlsContainer;
+ controlsContainer: Element;
}) => {
createColorPickerToolbox({
triggerButton,
@@ -127,7 +133,7 @@ const columnsToolboxItems = [
},
];
-const rowsToolboxItems = [
+const rowsToolboxItems: ToolboxItem[] = [
{
label: "Add Row Above",
icon: icons.insertTopTableIcon,
@@ -172,11 +178,12 @@ function createToolbox({
tippyOptions,
onClickItem,
}: {
- triggerButton: HTMLElement;
- items: { icon: string; label: string }[];
+ triggerButton: Element | null;
+ items: ToolboxItem[];
tippyOptions: any;
- onClickItem: any;
+ onClickItem: (item: ToolboxItem) => void;
}): Instance {
+ // @ts-expect-error
const toolbox = tippy(triggerButton, {
content: h(
"div",
@@ -278,14 +285,14 @@ export class TableView implements NodeView {
decorations: Decoration[];
editor: Editor;
getPos: () => number;
- hoveredCell;
+ hoveredCell: ResolvedPos | null = null;
map: TableMap;
root: HTMLElement;
- table: HTMLElement;
- colgroup: HTMLElement;
+ table: HTMLTableElement;
+ colgroup: HTMLTableColElement;
tbody: HTMLElement;
- rowsControl?: HTMLElement;
- columnsControl?: HTMLElement;
+ rowsControl?: HTMLElement | null;
+ columnsControl?: HTMLElement | null;
columnsToolbox?: Instance;
rowsToolbox?: Instance;
controls?: HTMLElement;
@@ -398,13 +405,13 @@ export class TableView implements NodeView {
this.render();
}
- update(node: ProseMirrorNode, decorations) {
+ update(node: ProseMirrorNode, decorations: readonly Decoration[]) {
if (node.type !== this.node.type) {
return false;
}
this.node = node;
- this.decorations = decorations;
+ this.decorations = [...decorations];
this.map = TableMap.get(this.node);
if (this.editor.isEditable) {
@@ -430,19 +437,16 @@ export class TableView implements NodeView {
}
updateControls() {
- const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce(
- (acc, curr) => {
- if (curr.spec.hoveredCell !== undefined) {
- acc["hoveredCell"] = curr.spec.hoveredCell;
- }
+ const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce((acc, curr) => {
+ if (curr.spec.hoveredCell !== undefined) {
+ acc["hoveredCell"] = curr.spec.hoveredCell;
+ }
- if (curr.spec.hoveredTable !== undefined) {
- acc["hoveredTable"] = curr.spec.hoveredTable;
- }
- return acc;
- },
- {} as Record
- ) as any;
+ if (curr.spec.hoveredTable !== undefined) {
+ acc["hoveredTable"] = curr.spec.hoveredTable;
+ }
+ return acc;
+ }, {} as Record) as any;
if (table === undefined || cell === undefined) {
return this.root.classList.add("controls--disabled");
@@ -453,14 +457,21 @@ export class TableView implements NodeView {
const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement;
+ if (!this.table) {
+ return;
+ }
+
const tableRect = this.table.getBoundingClientRect();
const cellRect = cellDom.getBoundingClientRect();
- this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`;
- this.columnsControl.style.width = `${cellRect.width}px`;
-
- this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
- this.rowsControl.style.height = `${cellRect.height}px`;
+ if (this.columnsControl) {
+ this.columnsControl.style.left = `${cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft}px`;
+ this.columnsControl.style.width = `${cellRect.width}px`;
+ }
+ if (this.rowsControl) {
+ this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
+ this.rowsControl.style.height = `${cellRect.height}px`;
+ }
}
selectColumn() {
@@ -471,10 +482,7 @@ export class TableView implements NodeView {
const headCellPos = this.map.map[colIndex + this.map.width * (this.map.height - 1)] + (this.getPos() + 1);
const cellSelection = CellSelection.create(this.editor.view.state.doc, anchorCellPos, headCellPos);
- this.editor.view.dispatch(
- // @ts-ignore
- this.editor.state.tr.setSelection(cellSelection)
- );
+ this.editor.view.dispatch(this.editor.state.tr.setSelection(cellSelection));
}
selectRow() {
@@ -485,9 +493,6 @@ export class TableView implements NodeView {
const headCellPos = this.map.map[anchorCellIndex + (this.map.width - 1)] + (this.getPos() + 1);
const cellSelection = CellSelection.create(this.editor.state.doc, anchorCellPos, headCellPos);
- this.editor.view.dispatch(
- // @ts-ignore
- this.editor.view.state.tr.setSelection(cellSelection)
- );
+ this.editor.view.dispatch(this.editor.view.state.tr.setSelection(cellSelection));
}
}
diff --git a/packages/editor/core/src/ui/mentions/custom.tsx b/packages/editor/core/src/ui/mentions/custom.tsx
index 6a47d79f09d..e723ca0d7f9 100644
--- a/packages/editor/core/src/ui/mentions/custom.tsx
+++ b/packages/editor/core/src/ui/mentions/custom.tsx
@@ -10,6 +10,11 @@ export interface CustomMentionOptions extends MentionOptions {
}
export const CustomMention = Mention.extend({
+ addStorage(this) {
+ return {
+ mentionsOpen: false,
+ };
+ },
addAttributes() {
return {
id: {
diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/packages/editor/core/src/ui/mentions/suggestion.ts
index 6d706cb7997..40e75a1e381 100644
--- a/packages/editor/core/src/ui/mentions/suggestion.ts
+++ b/packages/editor/core/src/ui/mentions/suggestion.ts
@@ -14,6 +14,7 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
return {
onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+ props.editor.storage.mentionsOpen = true;
reactRenderer = new ReactRenderer(MentionList, {
props,
editor: props.editor,
@@ -45,10 +46,18 @@ export const Suggestion = (suggestions: IMentionSuggestion[]) => ({
return true;
}
- // @ts-ignore
- return reactRenderer?.ref?.onKeyDown(props);
+ const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+
+ if (navigationKeys.includes(props.event.key)) {
+ // @ts-ignore
+ reactRenderer?.ref?.onKeyDown(props);
+ event?.stopPropagation();
+ return true;
+ }
+ return false;
},
- onExit: () => {
+ onExit: (props: { editor: Editor; event: KeyboardEvent }) => {
+ props.editor.storage.mentionsOpen = false;
popup?.[0].destroy();
reactRenderer?.destroy();
},
diff --git a/packages/editor/core/src/ui/menus/menu-items/index.tsx b/packages/editor/core/src/ui/menus/menu-items/index.tsx
index 610d677f825..f60febc59d6 100644
--- a/packages/editor/core/src/ui/menus/menu-items/index.tsx
+++ b/packages/editor/core/src/ui/menus/menu-items/index.tsx
@@ -106,7 +106,7 @@ export const TodoListItem = (editor: Editor): EditorMenuItem => ({
export const CodeItem = (editor: Editor): EditorMenuItem => ({
name: "code",
- isActive: () => editor?.isActive("code"),
+ isActive: () => editor?.isActive("code") || editor?.isActive("codeBlock"),
command: () => toggleCodeBlock(editor),
icon: CodeIcon,
});
@@ -120,7 +120,7 @@ export const NumberedListItem = (editor: Editor): EditorMenuItem => ({
export const QuoteItem = (editor: Editor): EditorMenuItem => ({
name: "quote",
- isActive: () => editor?.isActive("quote"),
+ isActive: () => editor?.isActive("blockquote"),
command: () => toggleBlockquote(editor),
icon: QuoteIcon,
});
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
index 5795d6c4a6f..cf7c4ee1823 100644
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -1,5 +1,4 @@
import StarterKit from "@tiptap/starter-kit";
-import TiptapLink from "@tiptap/extension-link";
import TiptapUnderline from "@tiptap/extension-underline";
import TextStyle from "@tiptap/extension-text-style";
import { Color } from "@tiptap/extension-color";
@@ -12,12 +11,12 @@ import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
import { Table } from "src/ui/extensions/table/table";
import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
import { TableRow } from "src/ui/extensions/table/table-row/table-row";
-import { HorizontalRule } from "src/ui/extensions/horizontal-rule";
import { ReadOnlyImageExtension } from "src/ui/extensions/image/read-only-image";
import { isValidHttpUrl } from "src/lib/utils";
import { Mentions } from "src/ui/mentions";
import { IMentionSuggestion } from "src/types/mention-suggestion";
+import { CustomLinkExtension } from "src/ui/extensions/custom-link";
export const CoreReadOnlyEditorExtensions = (mentionConfig: {
mentionSuggestions: IMentionSuggestion[];
@@ -51,7 +50,9 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
},
},
codeBlock: false,
- horizontalRule: false,
+ horizontalRule: {
+ HTMLAttributes: { class: "mt-4 mb-4" },
+ },
dropcursor: {
color: "rgba(var(--color-text-100))",
width: 2,
@@ -59,7 +60,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
gapcursor: false,
}),
Gapcursor,
- TiptapLink.configure({
+ CustomLinkExtension.configure({
protocols: ["http", "https"],
validate: (url) => isValidHttpUrl(url),
HTMLAttributes: {
@@ -72,7 +73,6 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
class: "rounded-lg border border-custom-border-300",
},
}),
- HorizontalRule,
TiptapUnderline,
TextStyle,
Color,
diff --git a/packages/editor/document-editor/package.json b/packages/editor/document-editor/package.json
index 72dfab954e8..7a3e9bdadf8 100644
--- a/packages/editor/document-editor/package.json
+++ b/packages/editor/document-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "@plane/document-editor",
- "version": "0.14.0",
+ "version": "0.15.0",
"description": "Package that powers Plane's Pages Editor",
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
@@ -28,14 +28,17 @@
"react-dom": "18.2.0"
},
"dependencies": {
+ "@floating-ui/react": "^0.26.4",
"@plane/editor-core": "*",
"@plane/editor-extensions": "*",
"@plane/ui": "*",
+ "@tippyjs/react": "^4.2.6",
"@tiptap/core": "^2.1.13",
"@tiptap/extension-placeholder": "^2.1.13",
"@tiptap/pm": "^2.1.13",
"@tiptap/suggestion": "^2.1.13",
"eslint-config-next": "13.2.4",
+ "lucide-react": "^0.309.0",
"react-popper": "^2.3.0",
"tippy.js": "^6.3.7",
"uuid": "^9.0.1"
diff --git a/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx b/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
new file mode 100644
index 00000000000..136d04e01e0
--- /dev/null
+++ b/packages/editor/document-editor/src/ui/components/links/link-edit-view.tsx
@@ -0,0 +1,148 @@
+import { isValidHttpUrl } from "@plane/editor-core";
+import { Node } from "@tiptap/pm/model";
+import { Link2Off } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { LinkViewProps } from "./link-view";
+
+const InputView = ({
+ label,
+ defaultValue,
+ placeholder,
+ onChange,
+}: {
+ label: string;
+ defaultValue: string;
+ placeholder: string;
+ onChange: (e: React.ChangeEvent) => void;
+}) => (
+ ();
+
+ const getText = (from: number, to: number) => {
+ const text = editor.state.doc.textBetween(from, to, "\n");
+ return text;
+ };
+
+ const isValidUrl = (urlString: string) => {
+ var urlPattern = new RegExp(
+ "^(https?:\\/\\/)?" + // validate protocol
+ "([\\w-]+\\.)+[\\w-]{2,}" + // validate domain name
+ "|((\\d{1,3}\\.){3}\\d{1,3})" + // validate IP (v4) address
+ "(\\:\\d+)?(\\/[-\\w.%]+)*" + // validate port and path
+ "(\\?[;&\\w.%=-]*)?" + // validate query string
+ "(\\#[-\\w]*)?$", // validate fragment locator
+ "i"
+ );
+ const regexTest = urlPattern.test(urlString);
+ const urlTest = isValidHttpUrl(urlString); // Ensure you have defined isValidHttpUrl
+ return regexTest && urlTest;
+ };
+
+ const handleUpdateLink = (url: string) => {
+ setLocalUrl(url);
+ };
+
+ useEffect(
+ () => () => {
+ if (linkRemoved.current) return;
+
+ const url = isValidUrl(localUrl) ? localUrl : viewProps.url;
+
+ editor.view.dispatch(editor.state.tr.removeMark(from, to, editor.schema.marks.link));
+ editor.view.dispatch(editor.state.tr.addMark(from, to, editor.schema.marks.link.create({ href: url })));
+ },
+ [localUrl]
+ );
+
+ const handleUpdateText = (text: string) => {
+ if (text === "") {
+ return;
+ }
+
+ const node = editor.view.state.doc.nodeAt(from) as Node;
+ if (!node) return;
+ const marks = node.marks;
+ if (!marks) return;
+
+ editor.chain().setTextSelection(from).run();
+
+ editor.chain().deleteRange({ from: positionRef.from, to: positionRef.to }).run();
+ editor.chain().insertContent(text).run();
+
+ editor
+ .chain()
+ .setTextSelection({
+ from: from,
+ to: from + text.length,
+ })
+ .run();
+
+ setPositionRef({ from: from, to: from + text.length });
+
+ marks.forEach((mark) => {
+ editor.chain().setMark(mark.type.name, mark.attrs).run();
+ });
+ };
+
+ const removeLink = () => {
+ editor.view.dispatch(editor.state.tr.removeMark(from, to, editor.schema.marks.link));
+ linkRemoved.current = true;
+ viewProps.onActionCompleteHandler({
+ title: "Link successfully removed",
+ message: "The link was removed from the text.",
+ type: "success",
+ });
+ viewProps.closeLinkView();
+ };
+
+ return (
+ ;
+ updatePageTitle: (title: string) => void;
editor: Editor;
+ onActionCompleteHandler: (action: {
+ title: string;
+ message: string;
+ type: "success" | "error" | "warning" | "info";
+ }) => void;
editorClassNames: string;
editorContentCustomClassNames?: string;
+ hideDragHandle?: () => void;
readonly: boolean;
};
-const debounce = (func: (...args: any[]) => void, wait: number) => {
- let timeout: NodeJS.Timeout | null = null;
- return function executedFunction(...args: any[]) {
- const later = () => {
- if (timeout) clearTimeout(timeout);
- func(...args);
- };
- if (timeout) clearTimeout(timeout);
- timeout = setTimeout(later, wait);
- };
-};
-
export const PageRenderer = (props: IPageRenderer) => {
- const { documentDetails, editor, editorClassNames, editorContentCustomClassNames, updatePageTitle, readonly } = props;
+ const {
+ documentDetails,
+ editor,
+ editorClassNames,
+ editorContentCustomClassNames,
+ updatePageTitle,
+ readonly,
+ hideDragHandle,
+ } = props;
const [pageTitle, setPagetitle] = useState(documentDetails.title);
- const debouncedUpdatePageTitle = debounce(updatePageTitle, 300);
+ const [linkViewProps, setLinkViewProps] = useState();
+ const [isOpen, setIsOpen] = useState(false);
+ const [coordinates, setCoordinates] = useState<{ x: number; y: number }>();
+
+ const { refs, floatingStyles, context } = useFloating({
+ open: isOpen,
+ onOpenChange: setIsOpen,
+ middleware: [flip(), shift(), hide({ strategy: "referenceHidden" })],
+ whileElementsMounted: autoUpdate,
+ });
+
+ const dismiss = useDismiss(context, {
+ ancestorScroll: true,
+ });
+
+ const { getFloatingProps } = useInteractions([dismiss]);
const handlePageTitleChange = (title: string) => {
setPagetitle(title);
- debouncedUpdatePageTitle(title);
+ updatePageTitle(title);
+ };
+
+ const [cleanup, setcleanup] = useState(() => () => {});
+
+ const floatingElementRef = useRef(null);
+
+ const closeLinkView = () => {
+ setIsOpen(false);
};
+ const handleLinkHover = useCallback(
+ (event: React.MouseEvent) => {
+ if (!editor) return;
+ const target = event.target as HTMLElement;
+ const view = editor.view as EditorView;
+
+ if (!target || !view) return;
+ const pos = view.posAtDOM(target, 0);
+ if (!pos || pos < 0) return;
+
+ if (target.nodeName !== "A") return;
+
+ const node = view.state.doc.nodeAt(pos) as Node;
+ if (!node || !node.isAtom) return;
+
+ // we need to check if any of the marks are links
+ const marks = node.marks;
+
+ if (!marks) return;
+
+ const linkMark = marks.find((mark) => mark.type.name === "link");
+
+ if (!linkMark) return;
+
+ if (floatingElementRef.current) {
+ floatingElementRef.current?.remove();
+ }
+
+ if (cleanup) cleanup();
+
+ const href = linkMark.attrs.href;
+ const componentLink = new ReactRenderer(LinkView, {
+ props: {
+ view: "LinkPreview",
+ url: href,
+ editor: editor,
+ from: pos,
+ to: pos + node.nodeSize,
+ },
+ editor,
+ });
+
+ const referenceElement = target as HTMLElement;
+ const floatingElement = componentLink.element as HTMLElement;
+
+ floatingElementRef.current = floatingElement;
+
+ const cleanupFunc = autoUpdate(referenceElement, floatingElement, () => {
+ computePosition(referenceElement, floatingElement, {
+ placement: "bottom",
+ middleware: [
+ flip(),
+ shift(),
+ hide({
+ strategy: "referenceHidden",
+ }),
+ ],
+ }).then(({ x, y }) => {
+ setCoordinates({ x: x - 300, y: y - 50 });
+ setIsOpen(true);
+ setLinkViewProps({
+ onActionCompleteHandler: props.onActionCompleteHandler,
+ closeLinkView: closeLinkView,
+ view: "LinkPreview",
+ url: href,
+ editor: editor,
+ from: pos,
+ to: pos + node.nodeSize,
+ });
+ });
+ });
+
+ setcleanup(cleanupFunc);
+ },
+ [editor, cleanup]
+ );
+
return (
-
+
+ {
+ e.stopPropagation();
+ }}
+ className="w-[280px] outline-none bg-custom-background-90 text-custom-text-900 text-sm"
+ defaultValue={defaultValue}
+ onChange={onChange}
+ />
+
+);
+
+export const LinkEditView = ({
+ viewProps,
+}: {
+ viewProps: LinkViewProps;
+ switchView: (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => void;
+}) => {
+ const { editor, from, to } = viewProps;
+
+ const [positionRef, setPositionRef] = useState({ from: from, to: to });
+ const [localUrl, setLocalUrl] = useState(viewProps.url);
+
+ const linkRemoved = useRef e.key === "Enter" && viewProps.closeLinkView()}
+ className="shadow-md rounded p-2 flex flex-col gap-3 bg-custom-background-90 border-custom-border-100 border-2"
+ >
+ handleUpdateLink(e.target.value)}
+ />
+ handleUpdateText(e.target.value)}
+ />
+
+
+ );
+};
diff --git a/packages/editor/document-editor/src/ui/components/links/link-input-view.tsx b/packages/editor/document-editor/src/ui/components/links/link-input-view.tsx
new file mode 100644
index 00000000000..fa73adbe1b2
--- /dev/null
+++ b/packages/editor/document-editor/src/ui/components/links/link-input-view.tsx
@@ -0,0 +1,9 @@
+import { LinkViewProps } from "./link-view";
+
+export const LinkInputView = ({
+ viewProps,
+ switchView,
+}: {
+ viewProps: LinkViewProps;
+ switchView: (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => void;
+}) =>
+
+ LinkInputView
; diff --git a/packages/editor/document-editor/src/ui/components/links/link-preview.tsx b/packages/editor/document-editor/src/ui/components/links/link-preview.tsx new file mode 100644 index 00000000000..ff3fd0263b5 --- /dev/null +++ b/packages/editor/document-editor/src/ui/components/links/link-preview.tsx @@ -0,0 +1,52 @@ +import { Copy, GlobeIcon, Link2Off, PencilIcon } from "lucide-react"; +import { LinkViewProps } from "./link-view"; + +export const LinkPreview = ({ + viewProps, + switchView, +}: { + viewProps: LinkViewProps; + switchView: (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => void; +}) => { + const { editor, from, to, url } = viewProps; + + const removeLink = () => { + editor.view.dispatch(editor.state.tr.removeMark(from, to, editor.schema.marks.link)); + viewProps.onActionCompleteHandler({ + title: "Link successfully removed", + message: "The link was removed from the text.", + type: "success", + }); + viewProps.closeLinkView(); + }; + + const copyLinkToClipboard = () => { + navigator.clipboard.writeText(url); + viewProps.onActionCompleteHandler({ + title: "Link successfully copied", + message: "The link was copied to the clipboard.", + type: "success", + }); + viewProps.closeLinkView(); + }; + + return ( +
+
+ );
+};
diff --git a/packages/editor/document-editor/src/ui/components/links/link-view.tsx b/packages/editor/document-editor/src/ui/components/links/link-view.tsx
new file mode 100644
index 00000000000..f1d22a68e26
--- /dev/null
+++ b/packages/editor/document-editor/src/ui/components/links/link-view.tsx
@@ -0,0 +1,48 @@
+import { Editor } from "@tiptap/react";
+import { CSSProperties, useEffect, useState } from "react";
+import { LinkEditView } from "./link-edit-view";
+import { LinkInputView } from "./link-input-view";
+import { LinkPreview } from "./link-preview";
+
+export interface LinkViewProps {
+ view?: "LinkPreview" | "LinkEditView" | "LinkInputView";
+ editor: Editor;
+ from: number;
+ to: number;
+ url: string;
+ closeLinkView: () => void;
+ onActionCompleteHandler: (action: {
+ title: string;
+ message: string;
+ type: "success" | "error" | "warning" | "info";
+ }) => void;
+}
+
+export const LinkView = (props: LinkViewProps & { style: CSSProperties }) => {
+ const [currentView, setCurrentView] = useState(props.view ?? "LinkInputView");
+ const [prevFrom, setPrevFrom] = useState(props.from);
+
+ const switchView = (view: "LinkPreview" | "LinkEditView" | "LinkInputView") => {
+ setCurrentView(view);
+ };
+
+ useEffect(() => {
+ if (props.from !== prevFrom) {
+ setCurrentView("LinkPreview");
+ setPrevFrom(props.from);
+ }
+ }, []);
+
+ const renderView = () => {
+ switch (currentView) {
+ case "LinkPreview":
+ return
+
+ {url.length > 40 ? url.slice(0, 40) + "..." : url}
+
+
+
+
+
+
+
{!readonly ? (
handlePageTitleChange(e.target.value)}
@@ -52,11 +167,20 @@ export const PageRenderer = (props: IPageRenderer) => {
disabled
/>
)}
- (null);
useEffect(() => {
- let newDisplayedItems: { [key: string]: IssueSuggestionProps[] } = {};
+ const newDisplayedItems: { [key: string]: IssueSuggestionProps[] } = {};
let totalLength = 0;
sections.forEach((section) => {
newDisplayedItems[section] = items.filter((item) => item.state === section).slice(0, 5);
@@ -65,8 +65,8 @@ const IssueSuggestionList = ({
}, [items]);
const selectItem = useCallback(
- (index: number) => {
- const item = displayedItems[currentSection][index];
+ (section: string, index: number) => {
+ const item = displayedItems[section][index];
if (item) {
command(item);
}
@@ -78,7 +78,6 @@ const IssueSuggestionList = ({
const navigationKeys = ["ArrowUp", "ArrowDown", "Enter", "Tab"];
const onKeyDown = (e: KeyboardEvent) => {
if (navigationKeys.includes(e.key)) {
- e.preventDefault();
// if (editor.isFocused) {
// editor.chain().blur();
// commandListContainer.current?.focus();
@@ -104,7 +103,7 @@ const IssueSuggestionList = ({
return true;
}
if (e.key === "Enter") {
- selectItem(selectedIndex);
+ selectItem(currentSection, selectedIndex);
return true;
}
if (e.key === "Tab") {
@@ -146,7 +145,7 @@ const IssueSuggestionList = ({
(1);
- const [issueDetails, setIssueDetails] = useState();
-
- useEffect(() => {
- props.issueEmbedConfig
- .fetchIssue(props.node.attrs.entity_identifier)
- .then((issue) => {
- setIssueDetails(issue);
- setLoading(0);
- })
- .catch((error) => {
- console.log(error);
- setLoading(-1);
- });
- }, []);
-
- const completeIssueEmbedAction = () => {
- props.issueEmbedConfig.clickAction(issueDetails.id, props.node.attrs.title);
- };
-
- return (
-
- {loading == 0 ? (
-
-
+
);
};
diff --git a/packages/editor/document-editor/src/ui/extensions/index.tsx b/packages/editor/document-editor/src/ui/extensions/index.tsx
index 155245f9e93..2576d0d74e7 100644
--- a/packages/editor/document-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/index.tsx
@@ -1,55 +1,29 @@
import Placeholder from "@tiptap/extension-placeholder";
-import { IssueWidgetExtension } from "src/ui/extensions/widgets/issue-embed-widget";
-
-import { IIssueEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types";
+import { IssueWidgetPlaceholder } from "src/ui/extensions/widgets/issue-embed-widget";
import { SlashCommand, DragAndDrop } from "@plane/editor-extensions";
-import { ISlashCommandItem, UploadImage } from "@plane/editor-core";
-import { IssueSuggestions } from "src/ui/extensions/widgets/issue-embed-suggestion-list";
-import { LayersIcon } from "@plane/ui";
+import { UploadImage } from "@plane/editor-core";
export const DocumentEditorExtensions = (
uploadFile: UploadImage,
- issueEmbedConfig?: IIssueEmbedConfig,
+ setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void,
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
-) => {
- const additionalOptions: ISlashCommandItem[] = [
- {
- key: "issue_embed",
- title: "Issue embed",
- description: "Embed an issue from the project.",
- searchTerms: ["issue", "link", "embed"],
- icon:
+
+ {isOpen && linkViewProps && coordinates && (
+
+
+ )}
#issue_
" - ) - .run(); - }, - }, - ]; +) => [ + SlashCommand(uploadFile, setIsSubmitting), + DragAndDrop(setHideDragHandle), + Placeholder.configure({ + placeholder: ({ node }) => { + if (node.type.name === "heading") { + return `Heading ${node.attrs.level}`; + } + if (node.type.name === "image" || node.type.name === "table") { + return ""; + } - return [ - SlashCommand(uploadFile, setIsSubmitting, additionalOptions), - DragAndDrop, - Placeholder.configure({ - placeholder: ({ node }) => { - if (node.type.name === "heading") { - return `Heading ${node.attrs.level}`; - } - if (node.type.name === "image" || node.type.name === "table") { - return ""; - } + return "Press '/' for commands..."; + }, + includeChildren: true, + }), + IssueWidgetPlaceholder(), +]; - return "Press '/' for commands..."; - }, - includeChildren: true, - }), - IssueWidgetExtension({ issueEmbedConfig }), - IssueSuggestions(issueEmbedConfig ? issueEmbedConfig.issues : []), - ]; -}; diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/index.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/index.tsx index acc6213c275..35a09bcc29a 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/index.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/index.tsx @@ -24,7 +24,7 @@ export const IssueSuggestions = (suggestions: any[]) => { title: suggestion.name, priority: suggestion.priority.toString(), identifier: `${suggestion.project_detail.identifier}-${suggestion.sequence_id}`, - state: suggestion.state_detail.name, + state: suggestion.state_detail && suggestion.state_detail.name ? suggestion.state_detail.name : "Todo", command: ({ editor, range }) => { editor .chain() diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-extension.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-extension.tsx index 75d977e4916..96a5c1325b7 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-extension.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-extension.tsx @@ -9,6 +9,8 @@ export const IssueEmbedSuggestions = Extension.create({ addOptions() { return { suggestion: { + char: "#issue_", + allowSpaces: true, command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => { props.command({ editor, range }); }, @@ -18,11 +20,8 @@ export const IssueEmbedSuggestions = Extension.create({ addProseMirrorPlugins() { return [ Suggestion({ - char: "#issue_", pluginKey: new PluginKey("issue-embed-suggestions"), editor: this.editor, - allowSpaces: true, - ...this.options.suggestion, }), ]; diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx index 0a166c3e397..869c7a8c6f3 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx @@ -53,7 +53,7 @@ const IssueSuggestionList = ({ const commandListContainer = useRef
{sections.map((section) => {
const sectionItems = displayedItems[section];
@@ -172,7 +171,7 @@ const IssueSuggestionList = ({
}
)}
key={item.identifier}
- onClick={() => selectItem(index)}
+ onClick={() => selectItem(section, index)}
>
) : null;
};
-
export const IssueListRenderer = () => {
let component: ReactRenderer | null = null;
let popup: any | null = null;
return {
- onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+ onStart: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
+ const container = document.querySelector(".frame-renderer") as HTMLElement;
component = new ReactRenderer(IssueSuggestionList, {
props,
// @ts-ignore
editor: props.editor,
});
-
// @ts-ignore
- popup = tippy("body", {
+ popup = tippy(".frame-renderer", {
+ flipbehavior: ["bottom", "top"],
+ appendTo: () => document.querySelector(".frame-renderer") as HTMLElement,
+ flip: true,
+ flipOnUpdate: true,
getReferenceClientRect: props.clientRect,
- appendTo: () => document.querySelector("#editor-container"),
content: component.element,
showOnCreate: true,
interactive: true,
trigger: "manual",
- placement: "right",
+ placement: "bottom-start",
+ });
+
+ container.addEventListener("scroll", () => {
+ popup?.[0].destroy();
});
},
- onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+ onUpdate: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
component?.updateProps(props);
popup &&
@@ -226,10 +231,20 @@ export const IssueListRenderer = () => {
popup?.[0].hide();
return true;
}
- // @ts-ignore
- return component?.ref?.onKeyDown(props);
+
+ const navigationKeys = ["ArrowUp", "ArrowDown", "Enter", "Tab"];
+ if (navigationKeys.includes(props.event.key)) {
+ // @ts-ignore
+ component?.ref?.onKeyDown(props);
+ return true;
+ }
+ return false;
},
onExit: (e) => {
+ const container = document.querySelector(".frame-renderer") as HTMLElement;
+ if (container) {
+ container.removeEventListener("scroll", () => {});
+ }
popup?.[0].destroy();
setTimeout(() => {
component?.destroy();
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/index.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/index.tsx
index 9bbb34aa523..264a701521e 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/index.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/index.tsx
@@ -1,11 +1,3 @@
import { IssueWidget } from "src/ui/extensions/widgets/issue-embed-widget/issue-widget-node";
-import { IIssueEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types";
-interface IssueWidgetExtensionProps {
- issueEmbedConfig?: IIssueEmbedConfig;
-}
-
-export const IssueWidgetExtension = ({ issueEmbedConfig }: IssueWidgetExtensionProps) =>
- IssueWidget.configure({
- issueEmbedConfig,
- });
+export const IssueWidgetPlaceholder = () => IssueWidget.configure({});
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
index 78554c26d22..d3b6fd04f7d 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
@@ -1,76 +1,33 @@
// @ts-nocheck
-import { useState, useEffect } from "react";
+import { Button } from "@plane/ui";
import { NodeViewWrapper } from "@tiptap/react";
-import { Avatar, AvatarGroup, Loader, PriorityIcon } from "@plane/ui";
-import { Calendar, AlertTriangle } from "lucide-react";
+import { Crown } from "lucide-react";
-export const IssueWidgetCard = (props) => {
- const [loading, setLoading] = useState{item.identifier}
-
- {issueDetails.project_detail.identifier}-{issueDetails.sequence_id} -
-{issueDetails.name}
-
-
-
+
+ ;
- clickAction: (issueId: string, issueTitle: string) => void;
- issues: Array;
-}
diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx
index df35540246d..d1bdbc93545 100644
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@@ -10,13 +10,12 @@ import { DocumentDetails } from "src/types/editor-types";
import { PageRenderer } from "src/ui/components/page-renderer";
import { getMenuOptions } from "src/utils/menu-options";
import { useRouter } from "next/router";
-import { IEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types";
interface IDocumentEditor {
// document info
documentDetails: DocumentDetails;
value: string;
- rerenderOnPropsChange: {
+ rerenderOnPropsChange?: {
id: string;
description_html: string;
};
@@ -39,7 +38,7 @@ interface IDocumentEditor {
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
setShouldShowAlert?: (showAlert: boolean) => void;
forwardedRef?: any;
- updatePageTitle: (title: string) => Promise;
+ updatePageTitle: (title: string) => void;
debouncedUpdatesEnabled?: boolean;
isSubmitting: "submitting" | "submitted" | "saved";
@@ -47,7 +46,6 @@ interface IDocumentEditor {
duplicationConfig?: IDuplicationConfig;
pageLockConfig?: IPageLockConfig;
pageArchiveConfig?: IPageArchiveConfig;
- embedConfig?: IEmbedConfig;
}
interface DocumentEditorProps extends IDocumentEditor {
forwardedRef?: React.Ref;
@@ -75,17 +73,23 @@ const DocumentEditor = ({
duplicationConfig,
pageLockConfig,
pageArchiveConfig,
- embedConfig,
updatePageTitle,
cancelUploadImage,
onActionCompleteHandler,
rerenderOnPropsChange,
}: IDocumentEditor) => {
- // const [alert, setAlert] = useState("")
const { markings, updateMarkings } = useEditorMarkings();
const [sidePeekVisible, setSidePeekVisible] = useState(true);
const router = useRouter();
+ const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});
+
+ // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
+ // loads such that we can invoke it from react when the cursor leaves the container
+ const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
+ setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
+ };
+
const editor = useEditor({
onChange(json, html) {
updateMarkings(json);
@@ -104,7 +108,7 @@ const DocumentEditor = ({
cancelUploadImage,
rerenderOnPropsChange,
forwardedRef,
- extensions: DocumentEditorExtensions(uploadFile, embedConfig?.issueEmbedConfig, setIsSubmitting),
+ extensions: DocumentEditorExtensions(uploadFile, setHideDragHandleFunction, setIsSubmitting),
});
if (!editor) {
@@ -145,12 +149,14 @@ const DocumentEditor = ({
documentDetails={documentDetails}
isSubmitting={isSubmitting}
/>
-
+ {props.node.attrs.project_identifier}-{props.node.attrs.sequence_id} +
+
+
+
+);
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-node.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-node.tsx
index c13637bd916..6c744927adc 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-node.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-node.tsx
@@ -34,9 +34,7 @@ export const IssueWidget = Node.create({
},
addNodeView() {
- return ReactNodeViewRenderer((props: Object) => (
-
+
+
+
- ) : loading == -1 ? (
-
+
-
-
- {issueDetails.assignee_details.map((assignee) => (
-
+
+
+
+
+ Embed and access issues in pages seamlessly, upgrade to plane pro now.
- {issueDetails.target_date && (
-
-
- )}
-
- ) : (
-
-
-
-
- )}
-
- );
-};
+
-
-
+
+
void;
- embedConfig?: IEmbedConfig;
}
interface DocumentReadOnlyEditorProps extends IDocumentReadOnlyEditor {
@@ -51,7 +49,6 @@ const DocumentReadOnlyEditor = ({
pageDuplicationConfig,
pageLockConfig,
pageArchiveConfig,
- embedConfig,
rerenderOnPropsChange,
onActionCompleteHandler,
}: DocumentReadOnlyEditorProps) => {
@@ -63,7 +60,7 @@ const DocumentReadOnlyEditor = ({
value,
forwardedRef,
rerenderOnPropsChange,
- extensions: [IssueWidgetExtension({ issueEmbedConfig: embedConfig?.issueEmbedConfig })],
+ extensions: [IssueWidgetPlaceholder()],
});
useEffect(() => {
@@ -105,12 +102,13 @@ const DocumentReadOnlyEditor = ({
documentDetails={documentDetails}
archivedAt={pageArchiveConfig && pageArchiveConfig.archived_at}
/>
-
{
handleChange({ archive_in: val });
}}
input
- width="w-full"
disabled={!isAdmin}
>
<>
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index d21eb8b8097..8d6662c112d 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -1,17 +1,16 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import { useProject, useProjectState, useUser } from "hooks/store";
// component
import { SelectMonthModal } from "components/automation";
import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
// icons
import { ArchiveX } from "lucide-react";
// types
-import { IProject } from "types";
-// fetch keys
-import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { IProject } from "@plane/types";
+// constants
+import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "constants/project";
type Props = {
handleChange: (formData: Partial) => Promise;
@@ -21,15 +20,16 @@ export const AutoCloseAutomation: React.FC = observer((props) => {
const { handleChange } = props;
// states
const [monthModal, setmonthModal] = useState(false);
+ // store hooks
+ const {
+ membership: { currentProjectRole },
+ } = useUser();
+ const { currentProjectDetails } = useProject();
+ const { projectStates } = useProjectState();
- const { user: userStore, project: projectStore, projectState: projectStateStore } = useMobxStore();
-
- const userRole = userStore.currentProjectRole;
- const projectDetails = projectStore.currentProjectDetails;
// const stateGroups = projectStateStore.groupedProjectStates ?? undefined;
- const states = projectStateStore.projectStates;
- const options = states
+ const options = projectStates
?.filter((state) => state.group === "cancelled")
.map((state) => ({
value: state.id,
@@ -44,17 +44,17 @@ export const AutoCloseAutomation: React.FC = observer((props) => {
const multipleOptions = (options ?? []).length > 1;
- const defaultState = states?.find((s) => s.group === "cancelled")?.id || null;
+ const defaultState = projectStates?.find((s) => s.group === "cancelled")?.id || null;
- const selectedOption = states?.find((s) => s.id === projectDetails?.default_state ?? defaultState);
- const currentDefaultState = states?.find((s) => s.id === defaultState);
+ const selectedOption = projectStates?.find((s) => s.id === currentProjectDetails?.default_state ?? defaultState);
+ const currentDefaultState = projectStates?.find((s) => s.id === defaultState);
const initialValues: Partial = {
close_in: 1,
default_state: defaultState,
};
- const isAdmin = userRole === EUserWorkspaceRoles.ADMIN;
+ const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
return (
<>
@@ -79,9 +79,9 @@ export const AutoCloseAutomation: React.FC = observer((props) => {
- projectDetails?.close_in === 0
+ currentProjectDetails?.close_in === 0
? handleChange({ close_in: 1, default_state: defaultState })
: handleChange({ close_in: 0, default_state: null })
}
@@ -90,21 +90,22 @@ export const AutoCloseAutomation: React.FC = observer((props) => {
/>
- {projectDetails ? (
- projectDetails.close_in !== 0 && (
+ {currentProjectDetails ? (
+ currentProjectDetails.close_in !== 0 && (
{
handleChange({ close_in: val });
}}
input
- width="w-full"
disabled={!isAdmin}
>
<>
@@ -118,7 +119,7 @@ export const AutoCloseAutomation: React.FC = observer((props) => {
className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
onClick={() => setmonthModal(true)}
>
- Customise Time Range
+ Customize Time Range
@@ -129,7 +130,7 @@ export const AutoCloseAutomation: React.FC = observer((props) => {
{selectedOption ? (
@@ -159,7 +160,6 @@ export const AutoCloseAutomation: React.FC = observer((props) => {
}}
options={options}
disabled={!multipleOptions}
- width="w-full"
input
/>
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index eff42bb2d78..1d306bb0401 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -7,7 +7,7 @@ import { Dialog, Transition } from "@headlessui/react";
// ui
import { Button, Input } from "@plane/ui";
// types
-import type { IProject } from "types";
+import type { IProject } from "@plane/types";
// types
type Props = {
diff --git a/web/components/command-palette/actions/help-actions.tsx b/web/components/command-palette/actions/help-actions.tsx
index 859a6d23a19..4aaaab33a95 100644
--- a/web/components/command-palette/actions/help-actions.tsx
+++ b/web/components/command-palette/actions/help-actions.tsx
@@ -1,7 +1,7 @@
import { Command } from "cmdk";
import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import { useApplication } from "hooks/store";
// ui
import { DiscordIcon } from "@plane/ui";
@@ -14,7 +14,7 @@ export const CommandPaletteHelpActions: React.FC = (props) => {
const {
commandPalette: { toggleShortcutModal },
- } = useMobxStore();
+ } = useApplication();
return (
diff --git a/web/components/command-palette/actions/issue-actions/actions-list.tsx b/web/components/command-palette/actions/issue-actions/actions-list.tsx
index 8e188df7b3c..55f72c85d11 100644
--- a/web/components/command-palette/actions/issue-actions/actions-list.tsx
+++ b/web/components/command-palette/actions/issue-actions/actions-list.tsx
@@ -2,8 +2,8 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Command } from "cmdk";
import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2 } from "lucide-react";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import { useApplication, useUser, useIssues } from "hooks/store";
// hooks
import useToast from "hooks/use-toast";
// ui
@@ -11,11 +11,12 @@ import { DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
-import { IIssue } from "types";
+import { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "constants/issue";
type Props = {
closePalette: () => void;
- issueDetails: IIssue | undefined;
+ issueDetails: TIssue | undefined;
pages: string[];
setPages: (pages: string[]) => void;
setPlaceholder: (placeholder: string) => void;
@@ -28,15 +29,17 @@ export const CommandPaletteIssueActions: React.FC = observer((props) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
+ const {
+ issues: { updateIssue },
+ } = useIssues(EIssuesStoreType.PROJECT);
const {
commandPalette: { toggleCommandPaletteModal, toggleDeleteIssueModal },
- projectIssues: { updateIssue },
- user: { currentUser },
- } = useMobxStore();
+ } = useApplication();
+ const { currentUser } = useUser();
const { setToastAlert } = useToast();
- const handleUpdateIssue = async (formData: Partial) => {
+ const handleUpdateIssue = async (formData: Partial) => {
if (!workspaceSlug || !projectId || !issueDetails) return;
const payload = { ...formData };
@@ -49,12 +52,12 @@ export const CommandPaletteIssueActions: React.FC = observer((props) => {
if (!issueDetails || !assignee) return;
closePalette();
- const updatedAssignees = issueDetails.assignees ?? [];
+ const updatedAssignees = issueDetails.assignee_ids ?? [];
if (updatedAssignees.includes(assignee)) updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
else updatedAssignees.push(assignee);
- handleUpdateIssue({ assignees: updatedAssignees });
+ handleUpdateIssue({ assignee_ids: updatedAssignees });
};
const deleteIssue = () => {
@@ -130,7 +133,7 @@ export const CommandPaletteIssueActions: React.FC = observer((props) => {
className="focus:outline-none"
>
+
- projectDetails?.archive_in === 0 ? handleChange({ archive_in: 1 }) : handleChange({ archive_in: 0 })
+ currentProjectDetails?.archive_in === 0
+ ? handleChange({ archive_in: 1 })
+ : handleChange({ archive_in: 0 })
}
size="sm"
disabled={!isAdmin}
/>
- {projectDetails ? (
- projectDetails.archive_in !== 0 && (
+ {currentProjectDetails ? (
+ currentProjectDetails.archive_in !== 0 && (
+
Promise.resolve()}
readonly={true}
editor={editor}
diff --git a/packages/editor/extensions/package.json b/packages/editor/extensions/package.json
index 94801928c9a..3392493201f 100644
--- a/packages/editor/extensions/package.json
+++ b/packages/editor/extensions/package.json
@@ -1,6 +1,6 @@
{
"name": "@plane/editor-extensions",
- "version": "0.14.0",
+ "version": "0.15.0",
"description": "Package that powers Plane's Editor with extensions",
"private": true,
"main": "./dist/index.mjs",
diff --git a/packages/editor/extensions/src/extensions/drag-drop.tsx b/packages/editor/extensions/src/extensions/drag-drop.tsx
index 269caad93f4..af99fec61f6 100644
--- a/packages/editor/extensions/src/extensions/drag-drop.tsx
+++ b/packages/editor/extensions/src/extensions/drag-drop.tsx
@@ -3,6 +3,7 @@ import { Extension } from "@tiptap/core";
import { PluginKey, NodeSelection, Plugin } from "@tiptap/pm/state";
// @ts-ignore
import { __serializeForClipboard, EditorView } from "@tiptap/pm/view";
+import React from "react";
function createDragHandleElement(): HTMLElement {
const dragHandleElement = document.createElement("div");
@@ -30,6 +31,7 @@ function createDragHandleElement(): HTMLElement {
export interface DragHandleOptions {
dragHandleWidth: number;
+ setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
}
function absoluteRect(node: Element) {
@@ -43,22 +45,23 @@ function absoluteRect(node: Element) {
}
function nodeDOMAtCoords(coords: { x: number; y: number }) {
- return document.elementsFromPoint(coords.x, coords.y).find((elem: Element) => {
- return (
- elem.parentElement?.matches?.(".ProseMirror") ||
- elem.matches(
- [
- "li",
- "p:not(:first-child)",
- "pre",
- "blockquote",
- "h1, h2, h3",
- "[data-type=horizontalRule]",
- ".tableWrapper",
- ].join(", ")
- )
+ return document
+ .elementsFromPoint(coords.x, coords.y)
+ .find(
+ (elem: Element) =>
+ elem.parentElement?.matches?.(".ProseMirror") ||
+ elem.matches(
+ [
+ "li",
+ "p:not(:first-child)",
+ "pre",
+ "blockquote",
+ "h1, h2, h3",
+ "[data-type=horizontalRule]",
+ ".tableWrapper",
+ ].join(", ")
+ )
);
- });
}
function nodePosAtDOM(node: Element, view: EditorView) {
@@ -150,6 +153,8 @@ function DragHandle(options: DragHandleOptions) {
}
}
+ options.setHideDragHandle?.(hideDragHandle);
+
return new Plugin({
key: new PluginKey("dragHandle"),
view: (view) => {
@@ -237,14 +242,16 @@ function DragHandle(options: DragHandleOptions) {
});
}
-export const DragAndDrop = Extension.create({
- name: "dragAndDrop",
-
- addProseMirrorPlugins() {
- return [
- DragHandle({
- dragHandleWidth: 24,
- }),
- ];
- },
-});
+export const DragAndDrop = (setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void) =>
+ Extension.create({
+ name: "dragAndDrop",
+
+ addProseMirrorPlugins() {
+ return [
+ DragHandle({
+ dragHandleWidth: 24,
+ setHideDragHandle,
+ }),
+ ];
+ },
+ });
diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json
index 7882d60ff2e..2272b903061 100644
--- a/packages/editor/lite-text-editor/package.json
+++ b/packages/editor/lite-text-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "@plane/lite-text-editor",
- "version": "0.14.0",
+ "version": "0.15.0",
"description": "Package that powers Plane's Comment Editor",
"private": true,
"main": "./dist/index.mjs",
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx b/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
index 129efa4ee61..7d93bf36f42 100644
--- a/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
+++ b/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
@@ -4,13 +4,16 @@ export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
Extension.create({
name: "enterKey",
- addKeyboardShortcuts() {
+ addKeyboardShortcuts(this) {
return {
Enter: () => {
- if (onEnterKeyPress) {
- onEnterKeyPress();
+ if (!this.editor.storage.mentionsOpen) {
+ if (onEnterKeyPress) {
+ onEnterKeyPress();
+ }
+ return true;
}
- return true;
+ return false;
},
"Shift-Enter": ({ editor }) =>
editor.commands.first(({ commands }) => [
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
index 527fd567430..c4b24d166a5 100644
--- a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
@@ -1,5 +1,3 @@
import { EnterKeyExtension } from "src/ui/extensions/enter-key-extension";
-export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
- // EnterKeyExtension(onEnterKeyPress),
-];
+export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [EnterKeyExtension(onEnterKeyPress)];
diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json
index 245248d458d..7bd0920da7b 100644
--- a/packages/editor/rich-text-editor/package.json
+++ b/packages/editor/rich-text-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "@plane/rich-text-editor",
- "version": "0.14.0",
+ "version": "0.15.0",
"description": "Rich Text Editor that powers Plane",
"private": true,
"main": "./dist/index.mjs",
diff --git a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
index 1e81c8173c0..3d1da6cdab7 100644
--- a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
@@ -1,14 +1,15 @@
-import { SlashCommand, DragAndDrop } from "@plane/editor-extensions";
-import Placeholder from "@tiptap/extension-placeholder";
import { UploadImage } from "@plane/editor-core";
+import { DragAndDrop, SlashCommand } from "@plane/editor-extensions";
+import Placeholder from "@tiptap/extension-placeholder";
export const RichTextEditorExtensions = (
uploadFile: UploadImage,
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
- dragDropEnabled?: boolean
+ dragDropEnabled?: boolean,
+ setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void
) => [
SlashCommand(uploadFile, setIsSubmitting),
- dragDropEnabled === true && DragAndDrop,
+ dragDropEnabled === true && DragAndDrop(setHideDragHandle),
Placeholder.configure({
placeholder: ({ node }) => {
if (node.type.name === "heading") {
diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx
index 17d701600f7..43c3f8f3432 100644
--- a/packages/editor/rich-text-editor/src/ui/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/index.tsx
@@ -1,5 +1,4 @@
"use client";
-import * as React from "react";
import {
DeleteImage,
EditorContainer,
@@ -10,8 +9,9 @@ import {
UploadImage,
useEditor,
} from "@plane/editor-core";
-import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
+import * as React from "react";
import { RichTextEditorExtensions } from "src/ui/extensions";
+import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
export type IRichTextEditor = {
value: string;
@@ -66,6 +66,14 @@ const RichTextEditor = ({
rerenderOnPropsChange,
mentionSuggestions,
}: RichTextEditorProps) => {
+ const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});
+
+ // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
+ // loads such that we can invoke it from react when the cursor leaves the container
+ const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
+ setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
+ };
+
const editor = useEditor({
onChange,
debouncedUpdatesEnabled,
@@ -78,7 +86,7 @@ const RichTextEditor = ({
restoreFile,
forwardedRef,
rerenderOnPropsChange,
- extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting, dragDropEnabled),
+ extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting, dragDropEnabled, setHideDragHandleFunction),
mentionHighlights,
mentionSuggestions,
});
@@ -92,7 +100,7 @@ const RichTextEditor = ({
if (!editor) return null;
return (
-
+
{editor &&
diff --git a/web/components/auth-screens/not-authorized-view.tsx b/web/components/auth-screens/not-authorized-view.tsx
index f0a3e3d904c..8d9d6ecd4d9 100644
--- a/web/components/auth-screens/not-authorized-view.tsx
+++ b/web/components/auth-screens/not-authorized-view.tsx
@@ -1,12 +1,12 @@
import React from "react";
-// next
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useUser } from "hooks/store";
// layouts
import DefaultLayout from "layouts/default-layout";
-// hooks
-import useUser from "hooks/use-user";
// images
import ProjectNotAuthorizedImg from "public/auth/project-not-authorized.svg";
import WorkspaceNotAuthorizedImg from "public/auth/workspace-not-authorized.svg";
@@ -16,8 +16,9 @@ type Props = {
type: "project" | "workspace";
};
-export const NotAuthorizedView: React.FC = ({ actionButton, type }) => {
- const { user } = useUser();
+export const NotAuthorizedView: React.FC = observer((props) => {
+ const { actionButton, type } = props;
+ const { currentUser } = useUser();
const { query } = useRouter();
const { next_path } = query;
@@ -35,9 +36,9 @@ export const NotAuthorizedView: React.FC = ({ actionButton, type }) => {
) => Promise;
@@ -23,13 +22,13 @@ export const AutoArchiveAutomation: React.FC = observer((props) => {
const { handleChange } = props;
// states
const [monthModal, setmonthModal] = useState(false);
+ // store hooks
+ const {
+ membership: { currentProjectRole },
+ } = useUser();
+ const { currentProjectDetails } = useProject();
- const { user: userStore, project: projectStore } = useMobxStore();
-
- const projectDetails = projectStore.currentProjectDetails;
- const userRole = userStore.currentProjectRole;
-
- const isAdmin = userRole === EUserWorkspaceRoles.ADMIN;
+ const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
return (
<>
@@ -54,29 +53,32 @@ export const AutoArchiveAutomation: React.FC = observer((props) => {
= NextPage Or continue with
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
index d63d89eb2f8..10ee815f692 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper";
+import { cn } from "../../helpers";
export interface ButtonProps extends React.ButtonHTMLAttributes
-
- {children}
-
+ {children}
+
+
)}
{children}
- {selected &&
- {getPriorityIcon()}
+
+ ) : (
+
+
diff --git a/web/components/account/google-sign-in.tsx b/web/components/account/o-auth/google-sign-in.tsx
similarity index 87%
rename from web/components/account/google-sign-in.tsx
rename to web/components/account/o-auth/google-sign-in.tsx
index 48488e07e1d..c1c57baa0a4 100644
--- a/web/components/account/google-sign-in.tsx
+++ b/web/components/account/o-auth/google-sign-in.tsx
@@ -4,10 +4,11 @@ import Script from "next/script";
type Props = {
handleSignIn: React.Dispatch
{total === 0 ? (
-
);
diff --git a/space/components/accounts/sign-in-forms/create-password.tsx b/space/components/accounts/sign-in-forms/create-password.tsx
index cb7326b7579..55205e70757 100644
--- a/space/components/accounts/sign-in-forms/create-password.tsx
+++ b/space/components/accounts/sign-in-forms/create-password.tsx
@@ -101,7 +101,7 @@ export const CreatePasswordForm: React.FC{bars}
+ {bars}
) : (
- {bars}
+ {bars}
)}
+ ;
- isOnboarded: boolean;
-};
-
-type TCreatePasswordFormValues = {
- email: string;
- password: string;
-};
-
-const defaultValues: TCreatePasswordFormValues = {
- email: "",
- password: "",
-};
-
-// services
-const authService = new AuthService();
-
-export const CreatePasswordForm: React.FC = (props) => {
- const { email, handleSignInRedirection, isOnboarded } = props;
- // toast alert
- const { setToastAlert } = useToast();
- // form info
- const {
- control,
- formState: { errors, isSubmitting, isValid },
- handleSubmit,
- setFocus,
- } = useForm({
- defaultValues: {
- ...defaultValues,
- email,
- },
- mode: "onChange",
- reValidateMode: "onChange",
- });
-
- const handleCreatePassword = async (formData: TCreatePasswordFormValues) => {
- const payload = {
- password: formData.password,
- };
-
- await authService
- .setPassword(payload)
- .then(async () => {
- setToastAlert({
- type: "success",
- title: "Success!",
- message: "Password created successfully.",
- });
- await handleSignInRedirection();
- })
- .catch((err) =>
- setToastAlert({
- type: "error",
- title: "Error!",
- message: err?.error ?? "Something went wrong. Please try again.",
- })
- );
- };
-
- useEffect(() => {
- setFocus("password");
- }, [setFocus]);
-
- return (
- <>
- = observer((props) => {
+ const { onSubmit, updateEmail } = props;
+ // hooks
+ const { setToastAlert } = useToast();
+ const {
+ control,
+ formState: { errors, isSubmitting, isValid },
+ handleSubmit,
+ } = useForm({
+ defaultValues: {
+ email: "",
+ },
+ mode: "onChange",
+ reValidateMode: "onChange",
+ });
+
+ const handleFormSubmit = async (data: TEmailFormValues) => {
+ const payload: IEmailCheckData = {
+ email: data.email,
+ };
+
+ // update the global email state
+ updateEmail(data.email);
+
+ await authService
+ .emailCheck(payload)
+ .then((res) => onSubmit(res.is_password_autoset))
+ .catch((err) =>
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: err?.error ?? "Something went wrong. Please try again.",
+ })
+ );
+ };
+
+ return (
+ <>
+ (null);
+ const [popperElement, setPopperElement] = useState(null);
+ // popper-js init
+ const { styles, attributes } = usePopper(referenceElement, popperElement, {
+ placement: "right-start",
+ modifiers: [
+ {
+ name: "preventOverflow",
+ options: {
+ padding: 12,
+ },
+ },
+ ],
+ });
+
+ return (
+
+
+
+
+
+ {({ close }) => (
+
+
+ );
+};
diff --git a/web/components/account/sign-in-forms/index.ts b/web/components/account/sign-in-forms/index.ts
index 1150a071cfa..8e44f490bcc 100644
--- a/web/components/account/sign-in-forms/index.ts
+++ b/web/components/account/sign-in-forms/index.ts
@@ -1,9 +1,6 @@
-export * from "./create-password";
-export * from "./email-form";
-export * from "./o-auth-options";
+export * from "./email";
+export * from "./forgot-password-popover";
export * from "./optional-set-password";
export * from "./password";
export * from "./root";
-export * from "./self-hosted-sign-in";
-export * from "./set-password-link";
export * from "./unique-code";
diff --git a/web/components/account/sign-in-forms/optional-set-password.tsx b/web/components/account/sign-in-forms/optional-set-password.tsx
index ead9b9c9a06..d7a5952984f 100644
--- a/web/components/account/sign-in-forms/optional-set-password.tsx
+++ b/web/components/account/sign-in-forms/optional-set-password.tsx
@@ -1,36 +1,79 @@
import React, { useState } from "react";
-import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
+// services
+import { AuthService } from "services/auth.service";
+// hooks
+import useToast from "hooks/use-toast";
// ui
import { Button, Input } from "@plane/ui";
// helpers
import { checkEmailValidity } from "helpers/string.helper";
-// constants
-import { ESignInSteps } from "components/account";
+// icons
+import { Eye, EyeOff } from "lucide-react";
type Props = {
email: string;
- handleStepChange: (step: ESignInSteps) => void;
handleSignInRedirection: () => Promise;
- isOnboarded: boolean;
};
-export const OptionalSetPasswordForm: React.FC = (props) => {
- const { email, handleStepChange, handleSignInRedirection, isOnboarded } = props;
+type TCreatePasswordFormValues = {
+ email: string;
+ password: string;
+};
+
+const defaultValues: TCreatePasswordFormValues = {
+ email: "",
+ password: "",
+};
+
+// services
+const authService = new AuthService();
+
+export const SignInOptionalSetPasswordForm: React.FC = (props) => {
+ const { email, handleSignInRedirection } = props;
// states
const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
+ const [showPassword, setShowPassword] = useState(false);
+ // toast alert
+ const { setToastAlert } = useToast();
// form info
const {
control,
- formState: { errors, isValid },
- } = useForm({
+ formState: { errors, isSubmitting, isValid },
+ handleSubmit,
+ } = useForm({
defaultValues: {
+ ...defaultValues,
email,
},
mode: "onChange",
reValidateMode: "onChange",
});
+ const handleCreatePassword = async (formData: TCreatePasswordFormValues) => {
+ const payload = {
+ password: formData.password,
+ };
+
+ await authService
+ .setPassword(payload)
+ .then(async () => {
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Password created successfully.",
+ });
+ await handleSignInRedirection();
+ })
+ .catch((err) =>
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: err?.error ?? "Something went wrong. Please try again.",
+ })
+ );
+ };
+
const handleGoToWorkspace = async () => {
setIsGoingToWorkspace(true);
@@ -39,12 +82,11 @@ export const OptionalSetPasswordForm: React.FC = (props) => {
return (
<>
-
-
{envConfig?.google_client_id && (
-
diff --git a/web/components/account/sign-in-forms/create-password.tsx b/web/components/account/sign-in-forms/create-password.tsx
deleted file mode 100644
index cf53078bedf..00000000000
--- a/web/components/account/sign-in-forms/create-password.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { useEffect } from "react";
-import Link from "next/link";
-import { Controller, useForm } from "react-hook-form";
-// services
-import { AuthService } from "services/auth.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Button, Input } from "@plane/ui";
-// helpers
-import { checkEmailValidity } from "helpers/string.helper";
-// constants
-import { ESignInSteps } from "components/account";
-
-type Props = {
- email: string;
- handleStepChange: (step: ESignInSteps) => void;
- handleSignInRedirection: () => Promise
+
)}
{envConfig?.github_client_id && (
- - Get on your flight deck -
- - - ); -}; diff --git a/web/components/account/sign-in-forms/email.tsx b/web/components/account/sign-in-forms/email.tsx new file mode 100644 index 00000000000..67ef720fe63 --- /dev/null +++ b/web/components/account/sign-in-forms/email.tsx @@ -0,0 +1,110 @@ +import React from "react"; +import { Controller, useForm } from "react-hook-form"; +import { XCircle } from "lucide-react"; +import { observer } from "mobx-react-lite"; +// services +import { AuthService } from "services/auth.service"; +// hooks +import useToast from "hooks/use-toast"; +// ui +import { Button, Input } from "@plane/ui"; +// helpers +import { checkEmailValidity } from "helpers/string.helper"; +// types +import { IEmailCheckData } from "@plane/types"; + +type Props = { + onSubmit: (isPasswordAutoset: boolean) => void; + updateEmail: (email: string) => void; +}; + +type TEmailFormValues = { + email: string; +}; + +const authService = new AuthService(); + +export const SignInEmailForm: React.FC+ Welcome back, let{"'"}s get you on board +
++ Get back to your issues, projects and workspaces. +
+ + + + ); +}); diff --git a/web/components/account/sign-in-forms/forgot-password-popover.tsx b/web/components/account/sign-in-forms/forgot-password-popover.tsx new file mode 100644 index 00000000000..d652e51f1fe --- /dev/null +++ b/web/components/account/sign-in-forms/forgot-password-popover.tsx @@ -0,0 +1,54 @@ +import { Fragment, useState } from "react"; +import { usePopper } from "react-popper"; +import { Popover } from "@headlessui/react"; +import { X } from "lucide-react"; + +export const ForgotPasswordPopover = () => { + // popper-js refs + const [referenceElement, setReferenceElement] = useState
+ 🤥
+
+ )}
+ + We see that your god hasn{"'"}t enabled SMTP, we will not be able to send a password reset link +
+ +Set a password
-+
Set your password
+If you{"'"}d like to do away with codes, set a password here.
- -Oops! You are not authorized to view this page
- {user ? (
+ {currentUser ? (
);
-};
+});
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index 7ee4feacd9d..35b0b9b498b 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -1,9 +1,8 @@
import { useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
+// hooks
+import { useProject, useUser } from "hooks/store";
// ui
import { Button } from "@plane/ui";
// icons
@@ -12,12 +11,13 @@ import { ClipboardList } from "lucide-react";
import JoinProjectImg from "public/auth/project-not-authorized.svg";
export const JoinProject: React.FC = () => {
+ // states
const [isJoiningProject, setIsJoiningProject] = useState(false);
-
+ // store hooks
const {
- project: projectStore,
- user: { joinProject },
- }: RootStore = useMobxStore();
+ membership: { joinProject },
+ } = useUser();
+ const { fetchProjects } = useProject();
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@@ -28,12 +28,8 @@ export const JoinProject: React.FC = () => {
setIsJoiningProject(true);
joinProject(workspaceSlug.toString(), [projectId.toString()])
- .then(() => {
- projectStore.fetchProjects(workspaceSlug.toString());
- })
- .finally(() => {
- setIsJoiningProject(false);
- });
+ .then(() => fetchProjects(workspaceSlug.toString()))
+ .finally(() => setIsJoiningProject(false));
};
return (
diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index 6471bc9cfab..974efff3a1a 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -1,17 +1,16 @@
import React, { useState } from "react";
import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import { useProject, useUser } from "hooks/store";
// component
import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
import { SelectMonthModal } from "components/automation";
// icon
import { ArchiveRestore } from "lucide-react";
// constants
-import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
+import { EUserProjectRoles, PROJECT_AUTOMATION_MONTHS } from "constants/project";
// types
-import { IProject } from "types";
-import { EUserWorkspaceRoles } from "constants/workspace";
+import { IProject } from "@plane/types";
type Props = {
handleChange: (formData: Partial
- You have signed in as {user.email}.
+ You have signed in as {currentUser.email}.
Sign in
{" "}
@@ -58,4 +59,4 @@ export const NotAuthorizedView: React.FC
Auto-archive issues that are closed for
Auto-close issues that are inactive for
Auto-close Status
- {issueDetails?.assignees.includes(currentUser?.id ?? "") ? (
+ {issueDetails?.assignee_ids.includes(currentUser?.id ?? "") ? (
<>
= observer((props) => {
@@ -21,30 +22,40 @@ export const ChangeIssueAssignee: React.FC = observer((props) => {
const { workspaceSlug, projectId } = router.query;
// store
const {
- projectIssues: { updateIssue },
- projectMember: { projectMembers },
- } = useMobxStore();
+ issues: { updateIssue },
+ } = useIssues(EIssuesStoreType.PROJECT);
+ const {
+ project: { projectMemberIds, getProjectMemberDetails },
+ } = useMember();
const options =
- projectMembers?.map(({ member }) => ({
- value: member.id,
- query: member.display_name,
- content: (
- <>
- = (props) => {
const {
commandPalette: { toggleCreateCycleModal, toggleCreateModuleModal, toggleCreatePageModal, toggleCreateViewModal },
- trackEvent: { setTrackElement },
- } = useMobxStore();
+ eventTracker: { setTrackElement },
+ } = useApplication();
return (
<>
diff --git a/web/components/command-palette/actions/search-results.tsx b/web/components/command-palette/actions/search-results.tsx
index 791c6265610..769a26be7f4 100644
--- a/web/components/command-palette/actions/search-results.tsx
+++ b/web/components/command-palette/actions/search-results.tsx
@@ -3,7 +3,7 @@ import { Command } from "cmdk";
// helpers
import { commandGroups } from "components/command-palette";
// types
-import { IWorkspaceSearchResults } from "types";
+import { IWorkspaceSearchResults } from "@plane/types";
type Props = {
closePalette: () => void;
diff --git a/web/components/command-palette/actions/theme-actions.tsx b/web/components/command-palette/actions/theme-actions.tsx
index f7266a48a69..976a63c871d 100644
--- a/web/components/command-palette/actions/theme-actions.tsx
+++ b/web/components/command-palette/actions/theme-actions.tsx
@@ -4,8 +4,8 @@ import { useTheme } from "next-themes";
import { Settings } from "lucide-react";
import { observer } from "mobx-react-lite";
// hooks
+import { useUser } from "hooks/store";
import useToast from "hooks/use-toast";
-import { useMobxStore } from "lib/mobx/store-provider";
// constants
import { THEME_OPTIONS } from "constants/themes";
@@ -18,9 +18,7 @@ export const CommandPaletteThemeActions: FC = observer((props) => {
// states
const [mounted, setMounted] = useState(false);
// store
- const {
- user: { updateCurrentUserTheme },
- } = useMobxStore();
+ const { updateCurrentUserTheme } = useUser();
// hooks
const { setTheme } = useTheme();
const { setToastAlert } = useToast();
diff --git a/web/components/command-palette/actions/workspace-settings-actions.tsx b/web/components/command-palette/actions/workspace-settings-actions.tsx
index 84e62593a4f..1f05234f41d 100644
--- a/web/components/command-palette/actions/workspace-settings-actions.tsx
+++ b/web/components/command-palette/actions/workspace-settings-actions.tsx
@@ -1,7 +1,10 @@
import { useRouter } from "next/router";
import { Command } from "cmdk";
-// icons
-import { SettingIcon } from "components/icons";
+// hooks
+import { useUser } from "hooks/store";
+import Link from "next/link";
+// constants
+import { EUserWorkspaceRoles, WORKSPACE_SETTINGS_LINKS } from "constants/workspace";
type Props = {
closePalette: () => void;
@@ -9,9 +12,15 @@ type Props = {
export const CommandPaletteWorkspaceSettingsActions: React.FC = (props) => {
const { closePalette } = props;
-
+ // router
const router = useRouter();
const { workspaceSlug } = router.query;
+ // mobx store
+ const {
+ membership: { currentWorkspaceRole },
+ } = useUser();
+ // derived values
+ const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
const redirect = (path: string) => {
closePalette();
@@ -20,42 +29,23 @@ export const CommandPaletteWorkspaceSettingsActions: React.FC = (props) =
return (
<>
- redirect(`/${workspaceSlug}/settings`)} className="focus:outline-none">
-
- redirect(`/${workspaceSlug}/settings/members`)} className="focus:outline-none">
-
- redirect(`/${workspaceSlug}/settings/billing`)} className="focus:outline-none">
-
- redirect(`/${workspaceSlug}/settings/integrations`)} className="focus:outline-none">
-
- redirect(`/${workspaceSlug}/settings/imports`)} className="focus:outline-none">
-
- redirect(`/${workspaceSlug}/settings/exports`)} className="focus:outline-none">
-
+ {WORKSPACE_SETTINGS_LINKS.map(
+ (setting) =>
+ workspaceMemberInfo >= setting.access && (
+ redirect(`/${workspaceSlug}${setting.href}`)}
+ className="focus:outline-none"
+ >
+
+
+ )
+ )}
);
};
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
index 005e570e70e..34282782536 100644
--- a/web/components/command-palette/command-modal.tsx
+++ b/web/components/command-palette/command-modal.tsx
@@ -5,8 +5,8 @@ import { Command } from "cmdk";
import { Dialog, Transition } from "@headlessui/react";
import { observer } from "mobx-react-lite";
import { FolderPlus, Search, Settings } from "lucide-react";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import { useApplication, useProject } from "hooks/store";
// services
import { WorkspaceService } from "services/workspace.service";
import { IssueService } from "services/issue";
@@ -26,7 +26,7 @@ import {
} from "components/command-palette";
import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
// types
-import { IWorkspaceSearchResults } from "types";
+import { IWorkspaceSearchResults } from "@plane/types";
// fetch-keys
import { ISSUE_DETAILS } from "constants/fetch-keys";
@@ -35,6 +35,8 @@ const workspaceService = new WorkspaceService();
const issueService = new IssueService();
export const CommandModal: React.FC = observer(() => {
+ // hooks
+ const { getProjectById } = useProject();
// states
const [placeholder, setPlaceholder] = useState("Type a command or search...");
const [resultsCount, setResultsCount] = useState(0);
@@ -62,8 +64,8 @@ export const CommandModal: React.FC = observer(() => {
toggleCreateIssueModal,
toggleCreateProjectModal,
},
- trackEvent: { setTrackElement },
- } = useMobxStore();
+ eventTracker: { setTrackElement },
+ } = useApplication();
// router
const router = useRouter();
@@ -135,6 +137,8 @@ export const CommandModal: React.FC = observer(() => {
[debouncedSearchTerm, isWorkspaceLevel, projectId, workspaceSlug] // Only call effect if debounced search term changes
);
+ const projectDetails = getProjectById(issueDetails?.project_id ?? "");
+
return (
setSearchTerm("")} as={React.Fragment}>
-
- {issue.assignees.includes(member.id) && (
-
- ) => {
+ const handleUpdateIssue = async (formData: Partial) => {
if (!workspaceSlug || !projectId || !issue) return;
const payload = { ...formData };
@@ -54,18 +65,18 @@ export const ChangeIssueAssignee: React.FC = observer((props) => {
};
const handleIssueAssignees = (assignee: string) => {
- const updatedAssignees = issue.assignees ?? [];
+ const updatedAssignees = issue.assignee_ids ?? [];
if (updatedAssignees.includes(assignee)) updatedAssignees.splice(updatedAssignees.indexOf(assignee), 1);
else updatedAssignees.push(assignee);
- handleUpdateIssue({ assignees: updatedAssignees });
+ handleUpdateIssue({ assignee_ids: updatedAssignees });
closePalette();
};
return (
<>
- {options.map((option: any) => (
+ {options.map((option) => (
handleIssueAssignees(option.value)}
diff --git a/web/components/command-palette/actions/issue-actions/change-priority.tsx b/web/components/command-palette/actions/issue-actions/change-priority.tsx
index 81b9f7ae90c..8d1c482610a 100644
--- a/web/components/command-palette/actions/issue-actions/change-priority.tsx
+++ b/web/components/command-palette/actions/issue-actions/change-priority.tsx
@@ -3,17 +3,17 @@ import { observer } from "mobx-react-lite";
import { Command } from "cmdk";
import { Check } from "lucide-react";
// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+import { useIssues } from "hooks/store";
// ui
import { PriorityIcon } from "@plane/ui";
// types
-import { IIssue, TIssuePriorities } from "types";
+import { TIssue, TIssuePriorities } from "@plane/types";
// constants
-import { PRIORITIES } from "constants/project";
+import { EIssuesStoreType, ISSUE_PRIORITIES } from "constants/issue";
type Props = {
closePalette: () => void;
- issue: IIssue;
+ issue: TIssue;
};
export const ChangeIssuePriority: React.FC = observer((props) => {
@@ -23,10 +23,10 @@ export const ChangeIssuePriority: React.FC = observer((props) => {
const { workspaceSlug, projectId } = router.query;
const {
- projectIssues: { updateIssue },
- } = useMobxStore();
+ issues: { updateIssue },
+ } = useIssues(EIssuesStoreType.PROJECT);
- const submitChanges = async (formData: Partial) => {
+ const submitChanges = async (formData: Partial) => {
if (!workspaceSlug || !projectId || !issue) return;
const payload = { ...formData };
@@ -42,13 +42,13 @@ export const ChangeIssuePriority: React.FC = observer((props) => {
return (
<>
- {PRIORITIES.map((priority) => (
- handleIssueState(priority)} className="focus:outline-none">
+ {ISSUE_PRIORITIES.map((priority) => (
+ handleIssueState(priority.key)} className="focus:outline-none">
))}
diff --git a/web/components/command-palette/actions/issue-actions/change-state.tsx b/web/components/command-palette/actions/issue-actions/change-state.tsx
index 0ce05bd7b0f..7841a4a1e65 100644
--- a/web/components/command-palette/actions/issue-actions/change-state.tsx
+++ b/web/components/command-palette/actions/issue-actions/change-state.tsx
@@ -1,33 +1,33 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-// cmdk
import { Command } from "cmdk";
+// hooks
+import { useProjectState, useIssues } from "hooks/store";
// ui
import { Spinner, StateGroupIcon } from "@plane/ui";
// icons
import { Check } from "lucide-react";
// types
-import { IIssue } from "types";
+import { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "constants/issue";
type Props = {
closePalette: () => void;
- issue: IIssue;
+ issue: TIssue;
};
export const ChangeIssueState: React.FC = observer((props) => {
const { closePalette, issue } = props;
-
+ // router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
-
+ // store hooks
const {
- projectState: { projectStates },
- projectIssues: { updateIssue },
- } = useMobxStore();
+ issues: { updateIssue },
+ } = useIssues(EIssuesStoreType.PROJECT);
+ const { projectStates } = useProjectState();
- const submitChanges = async (formData: Partial) => {
+ const submitChanges = async (formData: Partial) => {
if (!workspaceSlug || !projectId || !issue) return;
const payload = { ...formData };
@@ -37,7 +37,7 @@ export const ChangeIssueState: React.FC = observer((props) => {
};
const handleIssueState = (stateId: string) => {
- submitChanges({ state: stateId });
+ submitChanges({ state_id: stateId });
closePalette();
};
@@ -51,7 +51,7 @@ export const ChangeIssueState: React.FC = observer((props) => {
-
+
- )}
-
- ),
- })) ?? [];
+ {issue.assignee_ids.includes(memberDetails?.member?.id ?? "") && (
+
+
+ )}
+
+ ),
+ };
+ }) ?? [];
- const handleUpdateIssue = async (formData: Partial
-
- {priority === issue.priority &&
+ {priority.key === issue.priority &&
{state.name}
{state.id === issue.state &&
+ {state.id === issue.state_id &&
))
) : (
diff --git a/web/components/command-palette/actions/project-actions.tsx b/web/components/command-palette/actions/project-actions.tsx
index 1e10b3a4645..44b5e6111fd 100644
--- a/web/components/command-palette/actions/project-actions.tsx
+++ b/web/components/command-palette/actions/project-actions.tsx
@@ -1,7 +1,7 @@
import { Command } from "cmdk";
import { ContrastIcon, FileText } from "lucide-react";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import { useApplication } from "hooks/store";
// ui
import { DiceIcon, PhotoFilterIcon } from "@plane/ui";
@@ -14,8 +14,8 @@ export const CommandPaletteProjectActions: React.FC
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+