feat: add the ability to limit a style to either comments or highlights

#14
ycnmhd · Sep 3, 2024 · d5c89a4 · d5c89a4
1 parent ad26bf0
commit d5c89a4
Show file tree

Hide file tree

Showing 11 changed files with 192 additions and 123 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "enhanced-annotations",
 	"name": "Enhanced Annotations",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"minAppVersion": "0.15.0",
 	"description": "Add a sidebar view for comments and highlights.",
 	"author": "ycnmhd",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "enhanced-annotations",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"description": "",
 	"scripts": {
 		"dev": "node esbuild.config.mjs",

diff --git a/src/editor-plugin/helpers/decorate-annotations/decorate-annotations.ts b/src/editor-plugin/helpers/decorate-annotations/decorate-annotations.ts
@@ -26,32 +26,44 @@ export const decorateAnnotations = (
                 const decoration =
                     plugin.decorationSettings.decorations[annotation.label];
                 if (decoration) {
-                    if (
-                        plugin.decorationSettings.decorateTags &&
-                        !annotation.isHighlight
-                    ) {
+                    // decoration.comment and decoration.highlight could be null based on style scope
+                    if (annotation.isHighlight) {
+                        if (decoration.highlight) {
+                            builder.add(
+                                annotation.position.from,
+                                annotation.position.to,
+                                decoration.highlight,
+                            );
+                        } else {
+                            builder.add(
+                                annotation.position.from,
+                                annotation.position.to,
+                                defaultHighlightDecoration,
+                            );
+                        }
+                    } else if (plugin.decorationSettings.decorateTags) {
+                        if (decoration.tag && decoration.comment) {
+                            builder.add(
+                                annotation.position.from,
+                                annotation.position.afterFrom,
+                                decoration.tag,
+                            );
+                            builder.add(
+                                annotation.position.afterFrom,
+                                annotation.position.beforeTo,
+                                decoration.comment,
+                            );
+                            builder.add(
+                                annotation.position.beforeTo,
+                                annotation.position.to,
+                                decoration.tag,
+                            );
+                        }
+                    } else if (decoration.comment) {
                         builder.add(
                             annotation.position.from,
-                            annotation.position.afterFrom,
-                            decoration.tag,
-                        );
-                        builder.add(
-                            annotation.position.afterFrom,
-                            annotation.position.beforeTo,
-                            decoration.comment,
-                        );
-                        builder.add(
-                            annotation.position.beforeTo,
                             annotation.position.to,
-                            decoration.tag,
-                        );
-                    } else {
-                        builder.add(
-                            annotation.position.from,
-                            annotation.position.to,
-                            annotation.isHighlight
-                                ? decoration.highlight
-                                : decoration.comment,
+                            decoration.comment,
                         );
                     }
                 } else if (annotation.isHighlight) {

diff --git a/src/editor-plugin/helpers/decorate-annotations/decoration-settings.ts b/src/editor-plugin/helpers/decorate-annotations/decoration-settings.ts
@@ -4,6 +4,12 @@ import { generateLabelStyleString } from './helpers/generate-label-style-string'
 import LabeledAnnotations from '../../../main';
 import { triggerEditorUpdate } from '../../../sidebar-outline/helpers/outline-updater/helpers/trigger-editor-update';
 
+type StyleDecorations = {
+    comment: Decoration | null;
+    tag: Decoration | null;
+    highlight: Decoration | null;
+};
+
 export class DecorationSettings {
     constructor(private plugin: LabeledAnnotations) {}
 
@@ -18,14 +24,7 @@ export class DecorationSettings {
         this.decorate();
     }
 
-    private _decorations: Record<
-        string,
-        {
-            comment: Decoration;
-            tag: Decoration;
-            highlight: Decoration;
-        }
-    >;
+    private _decorations: Record<string, StyleDecorations>;
 
     get decorations() {
         return this._decorations;
@@ -41,24 +40,32 @@ export class DecorationSettings {
         this._decorations = Object.values(styles.labels).reduce(
             (acc, val) => {
                 if (val.enableStyle) {
-                    acc[val.label] = {
-                        comment: Decoration.mark({
+                    const decorations: StyleDecorations = acc[val.label] || {
+                        comment: null,
+                        highlight: null,
+                        tag: null,
+                    };
+
+                    if (!val.style.scope || val.style.scope === 'highlights') {
+                        decorations.highlight = Decoration.mark({
                             attributes: {
                                 style: generateLabelStyleString(
                                     val.style,
-                                    false,
+                                    true,
                                 ),
                             },
-                        }),
-                        highlight: Decoration.mark({
+                        });
+                    }
+                    if (!val.style.scope || val.style.scope === 'comments') {
+                        decorations.comment = Decoration.mark({
                             attributes: {
                                 style: generateLabelStyleString(
                                     val.style,
-                                    true,
+                                    false,
                                 ),
                             },
-                        }),
-                        tag: Decoration.mark({
+                        });
+                        decorations.tag = Decoration.mark({
                             attributes: {
                                 style: generateLabelStyleString(
                                     {
@@ -68,19 +75,14 @@ export class DecorationSettings {
                                     false,
                                 ),
                             },
-                        }),
-                    };
+                        });
+                    }
+
+                    acc[val.label] = decorations;
                 }
                 return acc;
             },
-            {} as Record<
-                string,
-                {
-                    comment: Decoration;
-                    tag: Decoration;
-                    highlight: Decoration;
-                }
-            >,
+            {} as Record<string, StyleDecorations>,
         );
         this._decorateTags = styles.tag.enableStyle;
 

diff --git a/src/editor-suggest/annotation-suggest.ts b/src/editor-suggest/annotation-suggest.ts
@@ -40,9 +40,14 @@ export class AnnotationSuggest extends EditorSuggest<AnnotationCompletion> {
 
     getSuggestions(context: EditorSuggestContext): AnnotationCompletion[] {
         const groups = this.plugin.settings.getValue().decoration.styles.labels;
-        const labels = Object.values(groups)
-            .map((g) => g.label)
-            .filter((v) => v);
+        const labels = Array.from(
+            new Set(
+                Object.values(groups)
+                    .map((g) => g.label)
+                    .filter((v) => v),
+            ),
+        );
+
         const suggestions = labels
             .map((val) => ({ label: val }))
             .filter((item) =>

diff --git a/src/settings/settings-reducer.ts b/src/settings/settings-reducer.ts
@@ -8,6 +8,7 @@ import {
     NotesNamingMode,
     Opacity,
     Settings,
+    StyleScope,
 } from './settings-type';
 import { getDefaultColor } from './helpers/get-default-color';
 import { isValidLabel } from '../editor-suggest/helpers/is-valid-label';
@@ -103,6 +104,13 @@ export type SettingsActions =
               case?: Case;
           };
       }
+    | {
+          type: 'SET_LABEL_SCOPE';
+          payload: {
+              id: string;
+              scope?: StyleScope;
+          };
+      }
     | { type: 'SET_TTS_VOLUME'; payload: { volume: number } }
     | { type: 'SET_TTS_RATE'; payload: { rate: number } }
     | { type: 'SET_TTS_PITCH'; payload: { pitch: number } }
@@ -133,7 +141,7 @@ const updateState = (store: Settings, action: SettingsActions) => {
     const labels = store.decoration.styles.labels;
     const tag = store.decoration.styles.tag;
     if (action.type === 'SET_PATTERN') {
-        if (isValidLabel(action.payload.pattern))
+        if (!action.payload.pattern || isValidLabel(action.payload.pattern))
             labels[action.payload.id].label = action.payload.pattern;
     } else if (action.type === 'SET_COLOR') {
         labels[action.payload.id].style.color = action.payload.color;
@@ -166,6 +174,8 @@ const updateState = (store: Settings, action: SettingsActions) => {
         labels[action.payload.id].style.underline = action.payload.underline;
     else if (action.type === 'SET_LABEL_FONT_WEIGHT')
         labels[action.payload.id].style.fontWeight = action.payload.weight;
+    else if (action.type === 'SET_LABEL_SCOPE')
+        labels[action.payload.id].style.scope = action.payload.scope;
     else if (action.type === 'SET_LABEL_FONT_OPACITY')
         labels[action.payload.id].style.opacity = action.payload.opacity;
     else if (action.type === 'SET_LABEL_FONT_FAMILY')

diff --git a/src/settings/settings-type.ts b/src/settings/settings-type.ts
@@ -18,6 +18,8 @@ export type TagSettings = {
     enableStyle: boolean;
 };
 
+export type StyleScope = 'comments' | 'highlights';
+
 export type LabelStyle = {
     color?: string;
     italic?: boolean;
@@ -27,6 +29,7 @@ export type LabelStyle = {
     fontWeight?: FontWeight;
     opacity?: Opacity;
     fontFamily?: FontFamily;
+    scope?: StyleScope;
 };
 export type LabelSettings = {
     label: string;

diff --git a/...bar-outline/components/components/controls-bar/components/styles/additional-styles.svelte b/...bar-outline/components/components/controls-bar/components/styles/additional-styles.svelte
@@ -157,25 +157,24 @@
             type="color"
             value={label.style.color || ''}
         />
-        <ToggleButton
-            enabled={underline}
-            label="Underline"
-            onClick={onToggleUnderline}
-        >
-            <Underline size={18} />
-        </ToggleButton>
-        <ToggleButton enabled={italic} label="Italic" onClick={onToggleItalic}>
-            <Italic size={18} />
-        </ToggleButton>
 
         <MultiOptionsToggleButton
             props={{
-                name: 'Font weight',
-                options: fontWeights,
-                value: label.style.fontWeight,
-                onChange: onFontWeightChange,
+                onChange: onFontOpacityChange,
+                options: fontOpacities,
+                value: label.style.opacity,
+                name: 'Opacity',
+            }}
+        />
+        <MultiOptionsToggleButton
+            props={{
+                onChange: onFontSizeChange,
+                options: fontSizes,
+                value: label.style.fontSize,
+                name: 'Font size',
             }}
         />
+
         <SquareButton
             label={showAdditionalSettings ? l.COLLAPSE : l.EXPAND}
             onClick={onToggleAdditionalSettings}
@@ -189,6 +188,38 @@
     </div>
 
     {#if showAdditionalSettings}
+        <div class="settings-row">
+            <ToggleButton
+                enabled={italic}
+                label="Italic"
+                onClick={onToggleItalic}
+            >
+                <Italic size={18} />
+            </ToggleButton>
+
+            <MultiOptionsToggleButton
+                props={{
+                    name: 'Font weight',
+                    options: fontWeights,
+                    value: label.style.fontWeight,
+                    onChange: onFontWeightChange,
+                }}
+            />
+            <ToggleButton
+                enabled={underline}
+                label="Underline"
+                onClick={onToggleUnderline}
+            >
+                <Underline size={18} />
+            </ToggleButton>
+
+            <SquareButton
+                label={l.SETTINGS_LABELS_STYLES_DELETE_STYLE}
+                onClick={onDelete}
+            >
+                <Trash2 size={18} color="red" />
+            </SquareButton>
+        </div>
         <div class="settings-row">
             <MultiOptionsToggleButton
                 props={{
@@ -206,29 +237,6 @@
                     onChange: onLabelCaseChange,
                 }}
             />
-
-            <MultiOptionsToggleButton
-                props={{
-                    onChange: onFontSizeChange,
-                    options: fontSizes,
-                    value: label.style.fontSize,
-                    name: 'Font size',
-                }}
-            />
-            <MultiOptionsToggleButton
-                props={{
-                    onChange: onFontOpacityChange,
-                    options: fontOpacities,
-                    value: label.style.opacity,
-                    name: 'Opacity',
-                }}
-            />
-            <SquareButton
-                label={l.SETTINGS_LABELS_STYLES_DELETE_STYLE}
-                onClick={onDelete}
-            >
-                <Trash2 size={18} color="red" />
-            </SquareButton>
         </div>
     {/if}
 </div>

diff --git a/...ne/components/components/controls-bar/components/styles/multi-option-toggle-button.svelte b/...ne/components/components/controls-bar/components/styles/multi-option-toggle-button.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-	/* eslint-disable svelte/no-at-html-tags */
-	import { Notice } from 'obsidian';
-	import { CaseLowerIcon, CaseSensitiveIcon, CaseUpperIcon } from 'lucide-svelte';
+    /* eslint-disable svelte/no-at-html-tags */
+    import { Notice } from 'obsidian';
+    import { CaseLowerIcon, CaseSensitiveIcon, CaseUpperIcon, HighlighterIcon, MessageSquareIcon } from 'lucide-svelte';
 
-	const icons = {
+    const icons = {
 		'case-lower': CaseLowerIcon,
 		'case-upper': CaseUpperIcon,
-		'case-sensitive': CaseSensitiveIcon
+		'case-sensitive': CaseSensitiveIcon,
+		'comment':MessageSquareIcon,
+		'highlight':HighlighterIcon
 	};
 
 	type Option<T extends string | number> = {