Fast Highlight

Dev
48

Yeah @matenauta I think this topic got a bit off track… I think this topic might be pruned to refer to adding a highlighting button to the floating edit/quote popup

So, I made a theme component Highlighter Composer Button for the very specific and limited purpose of clicking a button in the composer toolbar to insert <mark>this</mark>, and also added a keyboard shortcut Ctrl-H for convenience.

There are 2 other different composer button components which both enable you to insert code on-the-fly to add text background and text colors. These other 2 were not so quick and convenient for me for 2 reasons:

  1. They require manually typing in your colors within the inserted code in order to work.

  2. They don’t always play as nicely with other elements I use in my posts such as scrollable content boxes:

discourse-highlighter-vs-colour-vs-bolor-bg
discourse-highlighter-vs-colour-vs-bolor-bg3072×1465 297 KB

2 Likes
49

Do you want to open a bit how did you do those scrollable boxes :face_with_peeking_eye:

50

Sure @Jagster it’s this theme component…

I style the boxes like so…

/* Scrollable Content Box Shadow */

.scrollable-content {
    border-left: none !important;
    background-color: var(--secondary) !important;
    padding: 1em 0.5em 1em 1em !important;
    box-shadow: 0 1.36px 8.896px #c4b59d, 0 0 1px !important;
    border-radius: 4px !important;
    margin: 0 8.896px !important;
}

.scrollable-content-inner {
    padding-right: 15px !important;
}

.scrollable-content-inner h1,
.scrollable-content-inner h2,
.scrollable-content-inner h3,
.scrollable-content-inner h4,
.scrollable-content-inner h5,
.scrollable-content-inner h6 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
}
3 Likes
51

Unfortunately, I won’t be able to use it on meta… :stuck_out_tongue:

1 Like
52

@matenauta sorry about that! I have started spitballing here about ways to improve the composer which I am also finding useful. Personally I am not convinced by the original post suggestion to add a highlighting option alongside quote and fast edit, when selecting text in a post you are reading. It makes more sense to place this feature in the composer, imo.

There are also general suggestions here about different ways text can currently be formatted using markdown, including various theme components that have been created over the years.

Interesting. So are you suggesting that the highlighted text would only be visible to the user, or would it be visible to everybody? So a few people could see everybody’s highlighted text? To me the latter feels chaotic and not so useful. The former I do not think is feasible to implement.

Discourse Shared Edits could use something like this, so when multiple people are editing it is clear who contributed which text. But also of somewhat limited value methinks and potentially chaotic.

Awesome! I have installed this on my personal site and it works well. Nice job!

3 Likes
53

Exactly, @tobiaseigen ! We use highlighter pens when we are reading and want to quickly highlight portions of text.

I think of this as I use the Fast Edit where I can (in the mini edit window) type in the tags around some text I have selected to edit…

<mark>some text</mark>

Do you think it would work if I make a copy of the Highlighter Theme Component and change the code in the api-setup.js to place the highlighter button (Or press h) in the PluginOutlet

quote-button-after

api-setup.js code 
import { apiInitializer } from "discourse/lib/api";
import loadScript from "discourse/lib/load-script";
import I18n from "I18n";

async function applyHighlight(element) {
  const highlights = element.querySelectorAll("mark");
  if (!highlights.length) {
    return;
  }
}

export default apiInitializer("0.11.1", (api) => {
  const { iconNode } = require("discourse-common/lib/icon-library");
  let icon = iconNode("highlighter");
  const currentLocale = I18n.currentLocale();
  // I18n.translations[currentLocale].js.highlight_button_title = I18n.t(themePrefix("composer_highlight_button_title"));
  // I18n.translations[currentLocale].js.composer.highlight_button_text = I18n.t(themePrefix("composer_highlight_button_text"));
  I18n.translations[currentLocale].js.highlight_button_title = "Highlight Text";
  I18n.translations[currentLocale].js.composer.this = "this";
  // I18n.translations[currentLocale].js.composer.highlight_button_text = "Highlight Text";

  api.modifyClass("controller:composer", {
    pluginId: "highlight",
    actions: {
      highlightButton() {
        this.get("toolbarEvent").applySurround("\n" + `<mark>` + "\n</mark>\n");
      },
    },
  });

  // add button to the toolbar
  api.onToolbarCreate((toolbar) => {
    toolbar.addButton({
      id: "composer_highlight_button",
      group: "extras",
      icon: "highlighter",
      shortcut: "H",
      preventFocus: true,
      trimLeading: true,
      title: "highlight_button_title",
      // perform: e => e.applySurround('<span>[wrap=highlight]', '[/wrap]</span>', 'this')
      perform: (e) => e.applySurround("<mark>", "</mark>", "this"),
    });
  });

  api.decorateCookedElement(
    async (elem, helper) => {
      const id = helper ? `post_${helper.getModel().id}` : "composer";
      applyHighlight(elem, id);
    },
    { id: "wrap-mark" }
  );
});

Or is it a fool’s errand!?

54

Right. I understand what it is you are seeking to do.

If you can get it done in a theme component then by all means go ahead. I am not a programmer so don’t know how you would do it.

2 Likes
55

Both insert and delete

Both <ins>insert</ins> and <del>delete</del>

Now I must also roll these into Composer Button Theme Components (just because, as @Lilly says – “gadgets are cool!”

Oi! HTML Formatting Tags

56

To me this could be a form of more accurate bookmark.

I wonder if you could extend the bookmarking system to remember highlighted sections of text?

1 Like
57

Very interesting thought…