Skip to content

FEATURE: rich editor link ui for editing it #32583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

FEATURE: rich editor link ui for editing it #32583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7a4687d
FEATURE: rich editor link ui for editing it
renato Apr 26, 2025
3a6af69
DEV: tests + tweaks
renato May 12, 2025
3c71c5c
DEV: remove redundant boolean
renato May 12, 2025
ce68987
Merge branch 'main' into rich_editor_link_ui
renato May 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 75 additions & 37 deletions app/assets/javascripts/discourse/app/components/d-editor.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { schedule, scheduleOnce } from "@ember/runloop";
import { service } from "@ember/service";
import { classNames } from "@ember-decorators/component";
import { observes, on as onEvent } from "@ember-decorators/object";
import curryComponent from "ember-curry-component";
import { emojiSearch, isSkinTonableEmoji } from "pretty-text/emoji";
import { translations } from "pretty-text/emoji/data";
import { Promise } from "rsvp";
Expand Down Expand Up @@ -68,6 +69,7 @@ export default class DEditor extends Component {
@tracked editorComponent;
/** @type {TextManipulation} */
@tracked textManipulation;
@tracked replacedToolbarComponent;

@tracked preview;

Expand Down Expand Up @@ -616,6 +618,11 @@ export default class DEditor extends Component {
});
}

@action
resetToolbar() {
this.replacedToolbarComponent = null;
}

@action
onChange(event) {
this.set("value", event?.target?.value);
Expand Down Expand Up @@ -652,7 +659,21 @@ export default class DEditor extends Component {
"indentSelection"
);

const replaceToolbar = ({ component, data }) => {
this.replacedToolbarComponent = curryComponent(
component,
{ data },
getOwner(this)
);
};

this.appEvents.on("composer:replace-toolbar", replaceToolbar);
this.appEvents.on("composer:reset-toolbar", this, "resetToolbar");

return () => {
this.appEvents.off("composer:replace-toolbar", replaceToolbar);
this.appEvents.off("composer:reset-toolbar", this, "resetToolbar");

this.appEvents.off(
"composer:insert-block",
textManipulation,
Expand Down Expand Up @@ -715,45 +736,62 @@ export default class DEditor extends Component {
{{if this.disabled 'disabled'}}
{{if this.isEditorFocused 'in-focus'}}"
>
<div class="d-editor-button-bar" role="toolbar">
{{#if this.siteSettings.rich_editor}}
<ToggleSwitch
@preventFocus={{true}}
@disabled={{@disableSubmit}}
@state={{this.isRichEditorEnabled}}
{{on "click" this.toggleRichEditor}}
/>
{{/if}}

{{#each this.toolbar.groups as |group|}}
{{#each group.buttons as |b|}}
{{#if (b.condition this)}}
{{#if b.popupMenu}}
<ToolbarPopupMenuOptions
@content={{this.popupMenuOptions}}
@onChange={{this.onPopupMenuAction}}
@onOpen={{fn b.action b}}
@tabindex={{-1}}
@onKeydown={{this.rovingButtonBar}}
@options={{hash icon=b.icon focusAfterOnChange=false}}
class={{b.className}}
/>
{{else}}
<DButton
@action={{fn b.action b}}
@translatedTitle={{b.title}}
@label={{b.label}}
@icon={{b.icon}}
@preventFocus={{b.preventFocus}}
@onKeyDown={{this.rovingButtonBar}}
tabindex={{b.tabindex}}
class={{b.className}}
/>

{{#if this.replacedToolbarComponent}}
<div class="d-editor-button-bar --replaced-toolbar" role="toolbar">
<div class="d-editor-replaced-toolbar">
<DButton
@action={{this.resetToolbar}}
@icon="angle-left"
@preventFocus={{true}}
@onKeyDown={{this.rovingButtonBar}}
@tabindex="-1"
class="btn-flat"
/>
{{this.replacedToolbarComponent}}
</div>
</div>
{{else}}
<div class="d-editor-button-bar" role="toolbar">
{{#if this.siteSettings.rich_editor}}
<ToggleSwitch
@preventFocus={{true}}
@disabled={{@disableSubmit}}
@state={{this.isRichEditorEnabled}}
{{on "click" this.toggleRichEditor}}
/>
{{/if}}

{{#each this.toolbar.groups as |group|}}
{{#each group.buttons as |b|}}
{{#if (b.condition this)}}
{{#if b.popupMenu}}
<ToolbarPopupMenuOptions
@content={{this.popupMenuOptions}}
@onChange={{this.onPopupMenuAction}}
@onOpen={{fn b.action b}}
@tabindex={{-1}}
@onKeydown={{this.rovingButtonBar}}
@options={{hash icon=b.icon focusAfterOnChange=false}}
class={{b.className}}
/>
{{else}}
<DButton
@action={{fn b.action b}}
@translatedTitle={{b.title}}
@label={{b.label}}
@icon={{b.icon}}
@preventFocus={{b.preventFocus}}
@onKeyDown={{this.rovingButtonBar}}
tabindex={{b.tabindex}}
class={{b.className}}
/>
{{/if}}
{{/if}}
{{/if}}
{{/each}}
{{/each}}
{{/each}}
</div>
</div>
{{/if}}

<ConditionalLoadingSpinner @condition={{this.loading}} />
<this.editorComponent
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/discourse/app/components/modal/insert-hyperlink.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { i18n } from "discourse-i18n";

export default class InsertHyperlink extends Component {
@tracked linkText = this.args.model.linkText;
@tracked linkUrl = "";
@tracked linkUrl = this.args.model.linkUrl ?? "";
@tracked selectedRow = -1;
@tracked searchResults = [];
@tracked searchLoading = false;
Expand Down
95 changes: 95 additions & 0 deletions app/assets/javascripts/discourse/app/static/prosemirror/components/composer-link-toolbar.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import Component from "@glimmer/component";
import { action } from "@ember/object";
import { service } from "@ember/service";
import DButton from "discourse/components/d-button";
import InsertHyperlink from "discourse/components/modal/insert-hyperlink";
import icon from "discourse/helpers/d-icon";
import { clipboardCopy } from "discourse/lib/utilities";
import { getLinkify } from "discourse/static/prosemirror/lib/markdown-it";
import { i18n } from "discourse-i18n";

const AUTO_LINKS = ["autolink", "linkify"];

export default class ComposerLinkToolbar extends Component {
@service toasts;
@service modal;

@action
startEditing() {
this.modal.show(InsertHyperlink, {
model: {
linkText: this.args.data.text,
linkUrl: this.args.data.href,
toolbarEvent: {
addText: (text) => {
const markdownLinkRegex = /\[(.*?)\]\((.*?)\)/;
const [, linkText, linkUrl] = text.match(markdownLinkRegex);
this.args.data.save({ text: linkText, href: linkUrl });
},
},
},
});
}

@action
copy() {
clipboardCopy(this.args.data.href);

// TODO(renato) Show "Link copied!" inline
this.toasts.success({
duration: 1500,
data: { message: i18n("composer.link_toolbar.link_copied") },
});
}

get canUnlink() {
// Unlinking autolinked links is cumbersome (relies on escaping),
// it would be confusing to users so we just avoid it.
return !AUTO_LINKS.includes(this.args.data.markup);
}

get canVisit() {
// Follows the same logic from preview and doesn't show the button for invalid URLs
return !!getLinkify().matchAtStart(this.args.data.href);
}

<template>
<div role="toolbar" class="composer-link-toolbar">
<DButton
@icon="pen"
class="btn-flat composer-link-toolbar__edit"
title={{i18n "composer.link_toolbar.edit"}}
@action={{this.startEditing}}
/>
<DButton
@icon="copy"
class="btn-flat composer-link-toolbar__copy"
title={{i18n "composer.link_toolbar.copy"}}
@action={{this.copy}}
/>

{{#if this.canUnlink}}
<DButton
@icon="link-slash"
class="btn-flat composer-link-toolbar__unlink"
title={{i18n "composer.link_toolbar.remove"}}
@action={{@data.unlink}}
/>
{{/if}}

{{#if this.canVisit}}
<div class="composer-link-toolbar__divider" />

<a
href={{@data.href}}
target="_blank"
rel="noopener noreferrer"
class="composer-link-toolbar__visit"
title={{i18n "composer.link_toolbar.visit"}}
>
{{icon "up-right-from-square"}}
</a>
{{/if}}
</div>
</template>
}
8 changes: 8 additions & 0 deletions app/assets/javascripts/discourse/app/static/prosemirror/components/prosemirror-editor.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@ const AUTOCOMPLETE_KEY_DOWN_SUPPRESS = ["Enter", "Tab"];
export default class ProsemirrorEditor extends Component {
@service session;
@service dialog;
@service menu;
@service site;
@service appEvents;
@service capabilities;

schema = createSchema(this.extensions, this.args.includeDefault);
view;
Expand All @@ -86,6 +90,10 @@ export default class ProsemirrorEditor extends Component {
topicId: this.args.topicId,
categoryId: this.args.categoryId,
session: this.session,
menu: this.menu,
site: this.site,
appEvents: this.appEvents,
capabilities: this.capabilities,
}),
};
}
Expand Down
Loading
Loading