feat(Vditor): support edit form (#771)

* refactor: 调整 dom 结构支持表单内使用

* chore: bump version 10.0.2

Author: ArgoZhang

src/components/BootstrapBlazor.Vditor/BootstrapBlazor.Vditor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.1</Version>
+    <Version>10.0.2</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.Vditor/Vditor.razor

@@ -6,4 +6,6 @@
 {
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id"></div>
+<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
+    <div class="bb-vditor-container"></div>
+</div>

src/components/BootstrapBlazor.Vditor/Vditor.razor.js

@@ -1,4 +1,4 @@
-import { addLink, addScript } from '../BootstrapBlazor/modules/utility.js';
+import { addLink, addScript } from '../BootstrapBlazor/modules/utility.js';
 import Data from '../BootstrapBlazor/modules/data.js';
 
 export async function init(id, invoke, options) {
@@ -10,8 +10,9 @@ export async function init(id, invoke, options) {
     await addLink('./_content/BootstrapBlazor.Vditor/css/vditor.css');
     await addScript('./_content/BootstrapBlazor.Vditor/js/vditor.js');
 
+    const root = el.querySelector('.bb-vditor-container');
     const { options: op, value } = options;
-    const vditor = new Vditor(id, getOptions(invoke, { ...op, value }));
+    const vditor = new Vditor(root, getOptions(invoke, { ...op, value }));
 
     Data.set(id, { el, invoke, vditor });
     return vditor;
@@ -35,11 +36,12 @@ const getOptions = (invoke, options) => {
 
 export async function reset(id, value, options) {
     const md = Data.get(id);
-    const { invoke, vditor } = md;
+    const { el, invoke, vditor } = md;
     if (vditor) {
         vditor.destroy();
 
-        md.vditor = new Vditor(id, getOptions(invoke, { ...options, value }));
+        const root = el.querySelector('.bb-vditor-container');
+        md.vditor = new Vditor(root, getOptions(invoke, { ...options, value }));
     }
     return md.vditor;
 }

src/components/BootstrapBlazor.Vditor/wwwroot/css/vditor.css

@@ -1,14 +1,14 @@
 @import url('index.css');
 
-.bb-vditor {
+.bb-vditor .vditor {
     border-radius: var(--bs-border-radius);
     overflow: hidden;
 }
 
-.bb-vditor.is-invalid {
+.bb-vditor.is-invalid .vditor {
     border-color: var(--bs-danger);
 }
 
-.bb-vditor.is-valid {
+.bb-vditor.is-valid .vditor {
     border-color: var(--bs-success);
 }