Simple html editor

src/Squidex.Domain.Apps.Core.Model/Schemas/StringFieldEditor.cs

@@ -13,6 +13,7 @@ namespace Squidex.Domain.Apps.Core.Schemas
         Color,
         Markdown,
         Dropdown,
+        Html,
         Radio,
         RichText,
         Slug,

src/Squidex/app/features/content/shared/field-editor.component.html

@@ -52,6 +52,9 @@
 						<ng-container *ngSwitchCase="'RichText'">
 							<sqx-rich-editor [formControl]="control"></sqx-rich-editor>
 						</ng-container>
+						<ng-container *ngSwitchCase="'Html'">
+							<sqx-code-editor [formControl]="control" mode="ace/mode/html"></sqx-code-editor>
+						</ng-container>
 						<ng-container *ngSwitchCase="'Markdown'">
 							<sqx-markdown-editor [formControl]="control"></sqx-markdown-editor>
 						</ng-container>

src/Squidex/app/features/schemas/pages/schema/schema-scripts-form.component.html

@@ -16,7 +16,7 @@
             <div class="form-group">
                 <div *ngFor="let script of editForm.form.controls | sqxKeys">
                     <ng-container *ngIf="selectedField === script">
-                        <sqx-jscript-editor name="script" [formControlName]="script"></sqx-jscript-editor>
+                        <sqx-code-editor name="script" [formControlName]="script"></sqx-code-editor>
                     </ng-container>
                 </div>
             </div>

src/Squidex/app/features/schemas/pages/schema/types/string-ui.component.html

@@ -81,6 +81,13 @@
 
                 <span class="radio-label">Color</span>
             </label>
+            <label class="btn btn-radio" [class.active]="editForm.controls['editor'].value === 'Html'">
+                <input type="radio" class="radio-input" formControlName="editor" value="Html" />
+
+                <i class="icon-control-Html"></i>
+
+                <span class="radio-label">HTML</span>
+            </label>
         </div>
     </div>
     <div class="form-group row" [class.hidden]="hideAllowedValues | async">

src/Squidex/app/framework/angular/forms/jscript-editor.component.ts → src/Squidex/app/framework/angular/forms/code-editor.component.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core';
 import { ControlValueAccessor,  NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -15,17 +15,17 @@ import { ResourceLoaderService, Types } from '@app/framework/internal';
 declare var ace: any;
 
 export const SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR: any = {
-    provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => JscriptEditorComponent), multi: true
+    provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CodeEditorComponent), multi: true
 };
 
 @Component({
-    selector: 'sqx-jscript-editor',
-    styleUrls: ['./jscript-editor.component.scss'],
-    templateUrl: './jscript-editor.component.html',
+    selector: 'sqx-code-editor',
+    styleUrls: ['./code-editor.component.scss'],
+    templateUrl: './code-editor.component.html',
     providers: [SQX_JSCRIPT_EDITOR_CONTROL_VALUE_ACCESSOR],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class JscriptEditorComponent implements ControlValueAccessor, AfterViewInit {
+export class CodeEditorComponent implements ControlValueAccessor, AfterViewInit {
     private callChange = (v: any) => { /* NOOP */ };
     private callTouched = () => { /* NOOP */ };
     private valueChanged = new Subject();
@@ -36,6 +36,9 @@ export class JscriptEditorComponent implements ControlValueAccessor, AfterViewIn
     @ViewChild('editor')
     public editor: ElementRef;
 
+    @Input()
+    public mode = 'ace/mode/javascript';
+
     constructor(
         private readonly resourceLoader: ResourceLoaderService
     ) {
@@ -75,7 +78,7 @@ export class JscriptEditorComponent implements ControlValueAccessor, AfterViewIn
         this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js').then(() => {
             this.aceEditor = ace.edit(this.editor.nativeElement);
 
-            this.aceEditor.getSession().setMode('ace/mode/javascript');
+            this.aceEditor.getSession().setMode(this.mode);
             this.aceEditor.setReadOnly(this.isDisabled);
             this.aceEditor.setFontSize(14);
 

src/Squidex/app/framework/declarations.ts

@@ -6,6 +6,7 @@
  */
 
 export * from './angular/forms/autocomplete.component';
+export * from './angular/forms/code-editor.component';
 export * from './angular/forms/confirm-click.directive';
 export * from './angular/forms/control-errors.component';
 export * from './angular/forms/copy.directive';
@@ -17,7 +18,6 @@ export * from './angular/forms/form-error.component';
 export * from './angular/forms/forms-helper';
 export * from './angular/forms/iframe-editor.component';
 export * from './angular/forms/indeterminate-value.directive';
-export * from './angular/forms/jscript-editor.component';
 export * from './angular/forms/json-editor.component';
 export * from './angular/forms/progress-bar.component';
 export * from './angular/forms/slider.component';

src/Squidex/app/framework/module.ts

@@ -16,6 +16,7 @@ import {
     CachingInterceptor,
     CanDeactivateGuard,
     ClipboardService,
+    CodeEditorComponent,
     ConfirmClickDirective,
     ControlErrorsComponent,
     CopyDirective,
@@ -41,7 +42,6 @@ import {
     ImageSourceDirective,
     IndeterminateValueDirective,
     ISODatePipe,
-    JscriptEditorComponent,
     JsonEditorComponent,
     KeysPipe,
     KNumberPipe,
@@ -94,6 +94,7 @@ import {
         AutocompleteComponent,
         ConfirmClickDirective,
         ControlErrorsComponent,
+        CodeEditorComponent,
         CopyDirective,
         DarkenPipe,
         DateTimeEditorComponent,
@@ -116,7 +117,6 @@ import {
         ImageSourceDirective,
         IndeterminateValueDirective,
         ISODatePipe,
-        JscriptEditorComponent,
         JsonEditorComponent,
         KeysPipe,
         KNumberPipe,
@@ -152,6 +152,7 @@ import {
     ],
     exports: [
         AutocompleteComponent,
+        CodeEditorComponent,
         CommonModule,
         ConfirmClickDirective,
         ControlErrorsComponent,
@@ -178,7 +179,6 @@ import {
         ImageSourceDirective,
         IndeterminateValueDirective,
         ISODatePipe,
-        JscriptEditorComponent,
         JsonEditorComponent,
         KeysPipe,
         KNumberPipe,

src/Squidex/app/theme/icomoon/demo-files/demo.css

@@ -162,6 +162,6 @@ p {
   font-size: 32px;
 }
 .fs6 {
-  font-size: 28px;
+  font-size: 32px;
 }
 

src/Squidex/app/theme/icomoon/demo.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;99)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;100)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
@@ -1356,6 +1356,22 @@
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
+        <div class="glyph fs6">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-control-Html">
+                
+                </span>
+                <span class="mls"> icon-control-Html</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e960" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe960;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs6">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-single-content">

src/Squidex/app/theme/icomoon/fonts/icomoon.svg

@@ -103,6 +103,7 @@
 <glyph unicode="&#xe95d;" glyph-name="star-full" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538z" />
 <glyph unicode="&#xe95e;" glyph-name="star-empty" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538zM512 206.502l-223.462-117.48 42.676 248.83-180.786 176.222 249.84 36.304 111.732 226.396 111.736-226.396 249.836-36.304-180.788-176.222 42.678-248.83-223.462 117.48z" />
 <glyph unicode="&#xe95f;" glyph-name="comments" d="M854 256.667v512h-684v-598l86 86h598zM854 852.667c46 0 84-38 84-84v-512c0-46-38-86-84-86h-598l-170-170v768c0 46 38 84 84 84h684z" />
+<glyph unicode="&#xe960;" glyph-name="control-Html" d="M159.073 285.257l-159.073 134.055 159.073 133.819 36.818-37.29-117.062-96.057 117.062-97.237zM493.247 414.828q0-33.042-9.441-57.115-9.205-24.073-25.961-40.122-16.521-15.813-39.178-23.601-22.657-7.552-49.327-7.552-26.197 0-48.855 4.012-22.421 3.776-42.954 10.385v323.338h57.587v-78.356l-2.36-47.203q12.981 16.757 30.21 26.905 17.465 10.149 41.774 10.149 21.241 0 37.762-8.496t27.614-24.309q11.329-15.577 17.229-37.998 5.9-22.185 5.9-50.035zM432.828 412.468q0 19.825-2.832 33.75t-8.26 22.893q-5.192 8.969-12.981 12.981-7.552 4.248-17.465 4.248-14.633 0-28.086-11.801-13.217-11.801-28.086-32.098v-104.79q6.844-2.596 16.757-4.248 10.149-1.652 20.533-1.652 13.689 0 24.781 5.664 11.329 5.664 19.117 16.049 8.024 10.385 12.273 25.253 4.248 15.105 4.248 33.75zM700.682 437.249q0.472 13.453-1.416 22.893-1.652 9.441-5.664 15.577-3.776 6.136-9.441 8.968t-12.981 2.832q-12.745 0-26.433-10.621-13.453-10.385-29.738-34.458v-151.756h-59.003v239.789h52.159l2.124-34.93q5.9 9.205 13.217 16.521 7.552 7.316 16.521 12.509 9.205 5.428 20.297 8.26t24.309 2.832q18.173 0 32.098-6.372 14.161-6.136 23.601-18.409 9.677-12.273 14.161-30.918 4.72-18.409 4.012-42.718zM864.927 553.132l159.073-133.819-159.073-134.055-36.582 37.29 116.826 96.293-116.826 97.001z" />
 <glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
 <glyph unicode="&#xf00a;" glyph-name="grid" d="M292.571 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM292.571 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 237.714v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM658.286 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 530.286v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857zM1024 822.857v-109.714c0-30.286-24.571-54.857-54.857-54.857h-182.857c-30.286 0-54.857 24.571-54.857 54.857v109.714c0 30.286 24.571 54.857 54.857 54.857h182.857c30.286 0 54.857-24.571 54.857-54.857z" />
 <glyph unicode="&#xf0c9;" glyph-name="list1" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />

src/Squidex/app/theme/icomoon/icons/control-Html.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="40px"
+   height="40px"
+   viewBox="0 0 40 40"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="control-Html.svg"><metadata
+     id="metadata37"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs35" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1017"
+     id="namedview33"
+     showgrid="false"
+     inkscape:zoom="5.9"
+     inkscape:cx="6.5889832"
+     inkscape:cy="9.6004962"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1"
+     inkscape:lockguides="true"
+     showguides="false" /><g
+     aria-label="&lt;br&gt;"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:17.93698692px;line-height:1.25;font-family:Consolas;-inkscape-font-specification:Consolas;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.44842473"
+     id="text818"
+     transform="matrix(1.0526316,0,0,1.0526316,-1.0526316,-1.368421)"><path
+       d="m 6.9030904,26 -5.90309042,-4.974711 5.90309042,-4.965953 1.3662939,1.38381 -4.344114,3.564626 4.344114,3.608417 z"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Consolas;-inkscape-font-specification:'Consolas Bold';letter-spacing:0.09559436px;stroke-width:0.44842473"
+       id="path820"
+       inkscape:connector-curvature="0" /><path
+       d="m 19.304089,21.191696 q 0,1.226162 -0.350332,2.119508 -0.341574,0.893346 -0.963412,1.48891 -0.613081,0.586805 -1.453877,0.875829 -0.840797,0.280265 -1.830484,0.280265 -0.97217,0 -1.812967,-0.148891 -0.832038,-0.140132 -1.594009,-0.385364 V 13.423089 h 2.137023 v 2.907754 l -0.08758,1.751659 q 0.481706,-0.621839 1.121061,-0.998446 0.648114,-0.376606 1.550218,-0.376606 0.788247,0 1.401327,0.315298 0.613081,0.315299 1.024721,0.902105 0.420398,0.578047 0.639355,1.410085 0.218958,0.82328 0.218958,1.856758 z m -2.242124,0.08758 q 0,-0.735696 -0.105099,-1.252436 -0.1051,-0.516739 -0.30654,-0.849554 -0.192683,-0.332816 -0.481707,-0.481707 -0.280265,-0.157649 -0.648113,-0.157649 -0.543015,0 -1.042237,0.437915 -0.490465,0.437915 -1.042238,1.191128 v 3.888683 q 0.253991,0.09634 0.621839,0.157649 0.376607,0.06131 0.761972,0.06131 0.507981,0 0.919621,-0.210199 0.420398,-0.210199 0.709422,-0.595564 0.297782,-0.385365 0.455431,-0.937138 0.157649,-0.56053 0.157649,-1.252436 z"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Consolas;-inkscape-font-specification:'Consolas Bold';letter-spacing:0.09559436px;stroke-width:0.44842473"
+       id="path822"
+       inkscape:connector-curvature="0" /><path
+       d="m 27.001883,20.359658 q 0.01752,-0.499222 -0.05255,-0.849554 -0.06131,-0.350332 -0.210199,-0.578048 -0.140133,-0.227715 -0.350332,-0.332815 -0.210199,-0.105099 -0.481706,-0.105099 -0.472948,0 -0.980929,0.394123 -0.499223,0.385365 -1.103545,1.278711 v 5.631583 h -2.189573 v -8.898427 h 1.935583 l 0.07882,1.296228 q 0.218958,-0.341574 0.490465,-0.613081 0.280265,-0.271507 0.61308,-0.46419 0.341574,-0.20144 0.753214,-0.30654 0.411639,-0.105099 0.902104,-0.105099 0.674389,0 1.191128,0.236474 0.525498,0.227715 0.875829,0.683147 0.359091,0.455431 0.525498,1.147336 0.175166,0.683147 0.148891,1.585251 z"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Consolas;-inkscape-font-specification:'Consolas Bold';letter-spacing:0.09559436px;stroke-width:0.44842473"
+       id="path824"
+       inkscape:connector-curvature="0" /><path
+       d="M 33.096909,16.059336 39,21.025289 33.096909,26 31.739374,24.616189 36.074729,21.042805 31.739374,17.443146 Z"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Consolas;-inkscape-font-specification:'Consolas Bold';letter-spacing:0.09559436px;stroke-width:0.44842473"
+       id="path826"
+       inkscape:connector-curvature="0" /></g></svg>

src/Squidex/app/theme/icomoon/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?jlrdyp');
-  src:  url('fonts/icomoon.eot?jlrdyp#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?jlrdyp') format('truetype'),
-    url('fonts/icomoon.woff?jlrdyp') format('woff'),
-    url('fonts/icomoon.svg?jlrdyp#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?54f7f7');
+  src:  url('fonts/icomoon.eot?54f7f7#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?54f7f7') format('truetype'),
+    url('fonts/icomoon.woff?54f7f7') format('woff'),
+    url('fonts/icomoon.svg?54f7f7#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -273,6 +273,9 @@
 .icon-user:before {
   content: "\e928";
 }
+.icon-control-Html:before {
+  content: "\e960";
+}
 .icon-single-content:before {
   content: "\e958";
 }