diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts index 460b92a..41fa6ce 100644 --- a/packages/comment-widget/src/base-form.ts +++ b/packages/comment-widget/src/base-form.ts @@ -13,6 +13,9 @@ import { kindContext, nameContext, toastContext, + nicknamePlaceholderContext, + emailPlaceholderContext, + websitePlaceholderContext, } from './context'; import './emoji-button'; import './icons/icon-loading'; @@ -60,6 +63,18 @@ export class BaseForm extends LitElement { @state() toastManager: ToastManager | undefined; + @consume({ context: nicknamePlaceholderContext, subscribe: true }) + @state() + nicknamePlaceholder = ''; + + @consume({ context: emailPlaceholderContext, subscribe: true }) + @state() + emailPlaceholder = ''; + + @consume({ context: websitePlaceholderContext, subscribe: true }) + @state() + websitePlaceholder = ''; + textareaRef: Ref = createRef(); get customAccount() { @@ -182,21 +197,21 @@ export class BaseForm extends LitElement { name="displayName" value=${this.customAccount.displayName} type="text" - placeholder="昵称" + placeholder=${this.nicknamePlaceholder} required /> （或登录账号） ` diff --git a/packages/comment-widget/src/comment-widget.ts b/packages/comment-widget/src/comment-widget.ts index 2f92f13..d4e36e5 100644 --- a/packages/comment-widget/src/comment-widget.ts +++ b/packages/comment-widget/src/comment-widget.ts @@ -31,6 +31,9 @@ import { useAvatarProviderContext, versionContext, withRepliesContext, + nicknamePlaceholderContext, + emailPlaceholderContext, + websitePlaceholderContext, } from './context'; import { ToastManager } from './lit-toast'; import baseStyles from './styles/base'; @@ -71,6 +74,18 @@ export class CommentWidget extends LitElement { @property({ type: Number, attribute: 'with-reply-size' }) withReplySize = 10; + @provide({ context: nicknamePlaceholderContext }) + @property({ type: String, attribute: 'nickname-placeholder' }) + nicknamePlaceholder = ''; + + @provide({ context: emailPlaceholderContext }) + @property({ type: String, attribute: 'email-placeholder' }) + emailPlaceholder = ''; + + @provide({ context: websitePlaceholderContext }) + @property({ type: String, attribute: 'website-placeholder' }) + websitePlaceholder = ''; + @provide({ context: useAvatarProviderContext }) @property({ type: Boolean, attribute: 'use-avatar-provider' }) useAvatarProvider = false; diff --git a/packages/comment-widget/src/context/index.ts b/packages/comment-widget/src/context/index.ts index d35c564..e55056c 100644 --- a/packages/comment-widget/src/context/index.ts +++ b/packages/comment-widget/src/context/index.ts @@ -13,6 +13,9 @@ export const useAvatarProviderContext = createContext(Symbol('useAvatar export const avatarProviderContext = createContext(Symbol('avatarProvider')); export const avatarProviderMirrorContext = createContext(Symbol('avatarProviderMirror')); export const avatarPolicyContext = createContext(Symbol('avatarPolicy')); +export const nicknamePlaceholderContext = createContext(Symbol('nicknamePlaceholder')); +export const emailPlaceholderContext = createContext(Symbol('emailPlaceholder')); +export const websitePlaceholderContext = createContext(Symbol('websitePlaceholder')); export const allowAnonymousCommentsContext = createContext( Symbol('allowAnonymousComments') diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts index 4aa74f8..f6dff79 100644 --- a/packages/widget/src/index.ts +++ b/packages/widget/src/index.ts @@ -16,6 +16,9 @@ interface Props { avatarProviderMirror?: string; avatarPolicy?: string; captchaEnabled: boolean; + nicknamePlaceholder?: string; + emailPlaceholder?: string; + websitePlaceholder?: string; } export function init(el: string, props: Props) { @@ -44,6 +47,9 @@ export function init(el: string, props: Props) { commentWidget.avatarProviderMirror = props.avatarProviderMirror || ''; commentWidget.avatarPolicy = props.avatarPolicy || ''; commentWidget.captchaEnabled = props.captchaEnabled || false; + commentWidget.nicknamePlaceholder = props.nicknamePlaceholder || ''; + commentWidget.emailPlaceholder = props.emailPlaceholder || ''; + commentWidget.websitePlaceholder = props.websitePlaceholder || ''; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { diff --git a/src/main/java/run/halo/comment/widget/DefaultCommentWidget.java b/src/main/java/run/halo/comment/widget/DefaultCommentWidget.java index de8f4f5..8a00169 100644 --- a/src/main/java/run/halo/comment/widget/DefaultCommentWidget.java +++ b/src/main/java/run/halo/comment/widget/DefaultCommentWidget.java @@ -67,6 +67,9 @@ private String commentHtml(IAttribute groupAttribute, IAttribute kindAttribute, properties.setProperty("replySize", String.valueOf(basicConfig.getReplySize())); properties.setProperty("withReplies", String.valueOf(basicConfig.isWithReplies())); properties.setProperty("withReplySize", String.valueOf(basicConfig.getWithReplySize())); + properties.setProperty("nicknamePlaceholder", String.valueOf(basicConfig.getNicknamePlaceholder())); + properties.setProperty("emailPlaceholder", String.valueOf(basicConfig.getEmailPlaceholder())); + properties.setProperty("websitePlaceholder", String.valueOf(basicConfig.getWebsitePlaceholder())); var avatarConfig = settingConfigGetter.getAvatarConfig().blockOptional().orElseThrow(); properties.setProperty("useAvatarProvider", String.valueOf(avatarConfig.isEnable())); @@ -100,6 +103,9 @@ private String commentHtml(IAttribute groupAttribute, IAttribute kindAttribute, avatarProviderMirror: "${avatarProviderMirror}", avatarPolicy: "${avatarPolicy}", captchaEnabled: ${captchaEnabled}, + nicknamePlaceholder: "${nicknamePlaceholder}", + emailPlaceholder: "${emailPlaceholder}", + websitePlaceholder: "${websitePlaceholder}", } ); diff --git a/src/main/java/run/halo/comment/widget/SettingConfigGetter.java b/src/main/java/run/halo/comment/widget/SettingConfigGetter.java index 257bcc6..298b734 100644 --- a/src/main/java/run/halo/comment/widget/SettingConfigGetter.java +++ b/src/main/java/run/halo/comment/widget/SettingConfigGetter.java @@ -69,6 +69,9 @@ class BasicConfig { private int replySize; private boolean withReplies; private int withReplySize; + private String nicknamePlaceholder; + private String emailPlaceholder; + private String websitePlaceholder; } @Data diff --git a/src/main/resources/extensions/settings.yaml b/src/main/resources/extensions/settings.yaml index b812553..56b57d0 100644 --- a/src/main/resources/extensions/settings.yaml +++ b/src/main/resources/extensions/settings.yaml @@ -31,6 +31,30 @@ spec: key: withReplySize validation: required value: 5 + - $formkit: text + label: 昵称输入提示 + name: nicknamePlaceholder + id: nicknamePlaceholder + key: nicknamePlaceholder + value: "昵称" + help: 匿名评论时昵称输入栏的提示信息 + validation: required + - $formkit: text + label: 电子邮件输入提示 + name: emailPlaceholder + id: emailPlaceholder + key: emailPlaceholder + value: "电子邮件" + help: 匿名评论时电子邮件输入栏的提示信息 + validation: required + - $formkit: text + label: 网站输入提示 + name: websitePlaceholder + id: websitePlaceholder + key: websitePlaceholder + value: "网站" + help: 匿名评论时网站输入栏的提示信息 + validation: required - group: security label: 安全设置 formSchema: