diff --git a/app/editor/menus/block.ts b/app/editor/menus/block.ts index 9a6fbe7d..26fac655 100644 --- a/app/editor/menus/block.ts +++ b/app/editor/menus/block.ts @@ -18,6 +18,7 @@ import { AttachmentIcon, ClockIcon, CalendarIcon, + BookmarkedIcon, } from "outline-icons"; import { MenuItem } from "@shared/editor/types"; import { Dictionary } from "~/hooks/useDictionary"; @@ -168,5 +169,12 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] { keywords: "notice card suggestion", attrs: { style: "tip" }, }, + { + name: "container_notice", + title: dictionary.bibleNotice, + icon: BookmarkedIcon, + keywords: "notice card suggestion", + attrs: { style: "bible" }, + }, ]; } diff --git a/app/hooks/useDictionary.ts b/app/hooks/useDictionary.ts index 67001749..d8492e05 100644 --- a/app/hooks/useDictionary.ts +++ b/app/hooks/useDictionary.ts @@ -75,6 +75,8 @@ export default function useDictionary() { showSource: t("Show source"), warning: t("Warning"), warningNotice: t("Warning notice"), + bible: t("Bible"), + bibleNotice: t("Bible quote"), insertDate: t("Current date"), insertTime: t("Current time"), insertDateTime: t("Current date and time"), diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts index c8e571d5..7d8aef81 100644 --- a/app/typings/styled-components.d.ts +++ b/app/typings/styled-components.d.ts @@ -54,6 +54,8 @@ declare module "styled-components" { noticeTipText: string; noticeWarningBackground: string; noticeWarningText: string; + noticeBibleBackground: string; + noticeBibleText: string; } interface Colors { diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts index e1ba4bfa..f6725fb5 100644 --- a/shared/editor/components/Styles.ts +++ b/shared/editor/components/Styles.ts @@ -511,6 +511,20 @@ h6 { } } +.notice-block.bible { + background: ${transparentize(0.9, props.theme.noticeBibleBackground)}; + border-left: 4px solid ${props.theme.noticeBibleBackground}; + color: ${props.theme.noticeBibleText}; + + .icon { + color: ${props.theme.noticeBibleBackground}; + } + + a { + color: ${props.theme.noticeBibleText}; + } +} + blockquote { margin: 0; padding-left: 1.5em; diff --git a/shared/editor/nodes/Notice.tsx b/shared/editor/nodes/Notice.tsx index 158a0dfb..f297c343 100644 --- a/shared/editor/nodes/Notice.tsx +++ b/shared/editor/nodes/Notice.tsx @@ -1,5 +1,5 @@ import Token from "markdown-it/lib/token"; -import { WarningIcon, InfoIcon, StarredIcon } from "outline-icons"; +import { WarningIcon, InfoIcon, StarredIcon, BookmarkedIcon } from "outline-icons"; import { wrappingInputRule } from "prosemirror-inputrules"; import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model"; import * as React from "react"; @@ -15,6 +15,7 @@ export default class Notice extends Node { info: this.options.dictionary.info, warning: this.options.dictionary.warning, tip: this.options.dictionary.tip, + bible: this.options.dictionary.bible, }); } @@ -47,6 +48,8 @@ export default class Notice extends Node { ? "tip" : dom.className.includes("warning") ? "warning" + : dom.className.includes("bible") + ? "bible" : undefined, }), }, @@ -75,6 +78,8 @@ export default class Notice extends Node { component = ; } else if (node.attrs.style === "warning") { component = ; + } else if (node.attrs.style === "bible") { + component = ; } else { component = ; } diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts index 3ff5c7cf..fb4804ec 100644 --- a/shared/styles/theme.ts +++ b/shared/styles/theme.ts @@ -87,6 +87,8 @@ export const base = { noticeTipText: colors.almostBlack, noticeWarningBackground: "#d73a49", noticeWarningText: colors.almostBlack, + noticeBibleBackground: "#996633", + noticeBibleText: colors.almostBlack, breakpoints, }; @@ -206,6 +208,7 @@ export const dark = { noticeInfoText: colors.white, noticeTipText: colors.white, noticeWarningText: colors.white, + noticeBibleText: colors.white, progressBarBackground: colors.slate, scrollbarBackground: colors.black, scrollbarThumb: colors.lightBlack,