Schnelles Highlight

[denvergeeks]

Ja @satonotdead Ich denke, dieses Thema ist ein wenig vom Thema abgekommen… Ich denke, dieses Thema könnte beschnitten werden, um sich auf das Hinzufügen einer Hervorhebungs-Schaltfläche zum schwebenden Bearbeitungs-/Zitat-Popup zu beziehen

Ich habe also eine Theme-Komponente Highlighter Composer Button für den sehr spezifischen und begrenzten Zweck erstellt, auf eine Schaltfläche in der Composer-Symbolleiste zu klicken, um \u003cmark\u003edies\u003c/mark\u003e einzufügen, und habe auch eine Tastenkombination \u003ckbd\u003eStrg-H\u003c/kbd\u003e zur Bequemlichkeit hinzugefügt.

Es gibt 2 weitere verschiedene Composer-Button-Komponenten, die es Ihnen beiden ermöglichen, Code on-the-fly einzufügen, um Text- und Textfarben hinzuzufügen. Diese anderen 2 waren für mich aus 2 Gründen nicht so schnell und bequem:

1. Sie erfordern die manuelle Eingabe Ihrer Farben in den eingefügten Code, damit sie funktionieren.

2. Sie spielen nicht immer so gut mit anderen Elementen zusammen, die ich in meinen Beiträgen verwende, wie z. B. scrollbare Inhaltsfelder:

[Jagster (Jakke Lehtonen)]

Möchtest du ein wenig darüber reden, wie du diese scrollbaren Boxen gemacht hast

[denvergeeks]

Sicher @Jagster, es ist diese Theme-Komponente…

GitHub - discourse/Scrollable-post-content: A Discourse theme component that allows you to add...

Ich style die Boxen 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;
}

[Canapin (Coin-coin le Canapin)]

Leider werde ich es nicht auf Meta verwenden können…

[tobiaseigen]

@satonotdead tut mir leid! Ich habe hier einige Ideen gesammelt, wie man den Composer verbessern kann, was ich auch nützlich finde. Persönlich bin ich von dem Vorschlag des ursprünglichen Beitrags, eine Hervorhebungsoption neben Zitat und schneller Bearbeitung hinzuzufügen, wenn man Text in einem Beitrag auswählt, den man liest, nicht überzeugt. Meiner Meinung nach ist es sinnvoller, diese Funktion im Composer zu platzieren.

Es gibt auch allgemeine Vorschläge hier, wie Text derzeit mit Markdown formatiert werden kann, einschließlich verschiedener Theme-Komponenten, die im Laufe der Jahre erstellt wurden.

@pfaffman

Mehrere Leute arbeiten an einem bestimmten Dokument oder denken darüber nach. Das Dokument ist geschrieben und die Diskussion dreht sich darum. Sie möchten vielleicht einfach nur Dinge darin hervorheben, so wie Sie es vor 20 Jahren in einem Stapel gebundener Papiere namens „Buch“ getan hätten. Oft möchten Sie einen Abschnitt hervorheben und zitieren, aber Sie möchten vielleicht einfach nur Dinge hervorheben, über die Sie später mehr nachdenken möchten.

Interessant. Schlagen Sie also vor, dass der hervorgehobene Text nur für den Benutzer sichtbar ist, oder wäre er für alle sichtbar? Könnten also ein paar Leute den hervorgehobenen Text aller sehen? Letzteres fühlt sich chaotisch und nicht sehr nützlich an. Ersteres halte ich für nicht umsetzbar.

Discourse Shared Edits könnte so etwas gebrauchen, damit bei mehreren Bearbeitern klar ist, wer welchen Text beigetragen hat. Aber auch von begrenztem Wert, wie ich finde, und potenziell chaotisch.

@denvergeeks

Also habe ich eine Theme-Komponente Highlighter Composer Button für den sehr spezifischen und begrenzten Zweck erstellt, auf eine Schaltfläche in der Composer-Symbolleiste zu klicken, um <mark>dies</mark> einzufügen, und habe auch eine Tastenkombination Strg+H zur Bequemlichkeit hinzugefügt.

Großartig! Ich habe das auf meiner persönlichen Website installiert und es funktioniert gut. Gute Arbeit!

[denvergeeks]

@tobiaseigen

wenn man Text in einem Beitrag auswählt, den man gerade liest.

Genau, @tobiaseigen! Wir benutzen Textmarker, wenn wir lesen und schnell Textabschnitte hervorheben wollen.

Ich denke dabei daran, wie ich die Schnelle Bearbeitung nutze, wo ich (im kleinen Bearbeitungsfenster) die Tags um \u003cmark\u003eetwas Text\u003c/mark\u003e, den ich ausgewählt habe, um ihn zu bearbeiten, eingeben kann…

\u003cmark\u003eetwas Text\u003c/mark\u003e

Glaubst du, es würde funktionieren, wenn ich eine Kopie der Highlighter Theme Component mache und den Code in api-setup.js ändere, um den Highlighter-Button (oder die Taste H) im PluginOutlet zu platzieren

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('[wrap=highlight]', '[/wrap]', '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" }
  );
});

Oder ist es ein aussichtsloses Unterfangen!?

[tobiaseigen]

Verstanden. Ich verstehe, was Sie tun möchten.

Wenn Sie es in einer Theme-Komponente umsetzen können, dann legen Sie los. Ich bin kein Programmierer und weiß nicht, wie Sie es machen würden.

[denvergeeks]

Beide einfügen und löschen

Beide <ins>einfügen</ins> und <del>löschen</del>

Jetzt muss ich diese auch noch in Composer Button Theme Components integrieren (nur weil, wie @Lilly sagt – „Gadgets sind cool!“

Hallo! HTML Formatting Tags

[merefield (Robert)]

Für mich könnte dies eine genauere Form des Bookmarking sein.

Ich frage mich, ob Sie das Bookmarking-System erweitern könnten, um hervorgehobene Textabschnitte zu speichern?

[denvergeeks]

Sehr interessanter Gedanke…