Skip to content

Commit

Permalink
Add video tag
Browse files Browse the repository at this point in the history
  • Loading branch information
@erossini
erossini committed Jul 4, 2024
1 parent 6b194ec commit 00eed45
Show file tree
Hide file tree
Showing 12 changed files with 2,447 additions and 24 deletions.
8 changes: 6 additions & 2 deletions MarkdownEditorDemo/wwwroot/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
<!-- include highlight.js CSS -->
<!--<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">-->
<!-- include the CSS for the EasyMDE -->
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/markdowneditor.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/easymde.min.css" rel="stylesheet" />
<link href="/_content/PSC.Blazor.Components.MarkdownEditor/css/alert.css" rel="stylesheet" />
</head>
Expand All @@ -39,10 +40,13 @@
<script src="/_content/PSC.Blazor.Components.CodeSnippet/codesnippet.js"></script>

<!-- add the scripts for the MarkdownEditor -->
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/mermaid.min.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/markdownEditor.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/easymde.min.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/textarearesizer.js"></script>
<script src="/_content/PSC.Blazor.Components.MarkdownEditor/js/textarearesize.min.js"></script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51944269-3"></script>
Expand Down
2 changes: 1 addition & 1 deletion PSC.Blazor.Components.MarkdownEditor/MarkdownEditor.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@inject IJSRuntime JSRuntime

<CascadingValue Value="@this" IsFixed="true">
<textarea @ref="@ElementRef" id="@ElementId" class="@CSSClass">
<textarea @ref="@ElementRef" id="@ElementId" class="@CSSClass resizable">
@if (Toolbar != null)
{
@Toolbar
Expand Down
37 changes: 37 additions & 0 deletions PSC.Blazor.Components.MarkdownEditor/MarkdownEditor.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,13 @@ public partial class MarkdownEditor : IDisposable
[Parameter]
public bool? AutoDownloadFontAwesome { get; set; }

/// <summary>
/// Gets or sets the characters status text.
/// </summary>
/// <value>The characters status text.</value>
[Parameter]
public string? CharactersStatusText { get; set; } = "characters: ";

/// <summary>
/// Gets or sets the CSS class.
/// </summary>
Expand Down Expand Up @@ -344,6 +351,20 @@ public partial class MarkdownEditor : IDisposable
[Parameter]
public bool LineWrapping { get; set; } = true;

/// <summary>
/// Gets or sets the lines status text.
/// </summary>
/// <value>The lines status text.</value>
[Parameter]
public string? LinesStatusText { get; set; } = "lines: ";

/// <summary>
/// Gets or sets the markdown explanation URL.
/// </summary>
/// <value>The markdown explanation URL.</value>
[Parameter]
public string? MarkdownUrl { get; set; }

/// <summary>
/// Sets fixed height for the composition area. minHeight option will be ignored.
/// Should be a string containing a valid CSS value like "500px". Defaults to undefined.
Expand Down Expand Up @@ -454,6 +475,14 @@ public string Value {
/// </summary>
[Parameter]
public string ValueHTML { get; set; }

/// <summary>
/// Gets or sets the words status text.
/// </summary>
/// <value>The words status text.</value>
[Parameter]
public string? WordsStatusText { get; set; } = "words: ";

#endregion Parameters

/// <summary>
Expand Down Expand Up @@ -749,6 +778,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
ShowIcons,
LineNumbers,
LineWrapping,
MarkdownUrl,
MinHeight,
MaxHeight,
Placeholder,
Expand All @@ -757,6 +787,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
Direction,
NativeSpellChecker,
SpellChecker,
StatusTexts = new
{
Autosave = AutoSaveText,
Characters = CharactersStatusText,
Lines = LinesStatusText,
Words = WordsStatusText,
},
Toolbar = Toolbar != null && toolbarButtons?.Count > 0 ? MarkdownActionProvider.Serialize(toolbarButtons) : null,
ToolbarTips,
UploadImage,
Expand Down
8 changes: 4 additions & 4 deletions PSC.Blazor.Components.MarkdownEditor/wwwroot/css/easymde.min.css
View file

Large diffs are not rendered by default.

212 changes: 212 additions & 0 deletions PSC.Blazor.Components.MarkdownEditor/wwwroot/css/markdowneditor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
.me-code.me-alert {
white-space: break-spaces;
}

.me-code.note {
white-space: break-spaces;
}

code.tip {
white-space: break-spaces;
}

.me-code.warn {
white-space: break-spaces;
}

.me-alert {
display: block;
position: relative;
word-wrap: break-word;
word-break: break-word;
padding: .75rem 1.25rem !important;
margin-bottom: 1rem !important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1rem;
}

.me-alert > * {
max-width: 100%
}

.me-alert > :first-child {
margin-top: 0
}

.me-alert > :last-child {
margin-bottom: 0
}

.me-alert:before {
content: unset !important
}

.me-alert + .me-alert {
margin-top: -.25rem !important
}

.me-alert p {
margin-top: .5rem;
margin-bottom: .5rem
}

.me-alert .title {
display: flex;
align-items: center;
flex-wrap: wrap;
font-weight: 600;
margin: 0
}

.me-icon {
display: inline-block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
margin-right: .5rem
}

.me-alert.callout {
border: 1px solid #eee;
border-left-width: .25rem;
border-radius: .25rem;
background: var(--background)
}

.me-alert.callout.note {
border-left-color: #17a2b8 !important;
white-space: pre-wrap;
;
}

.me-alert.callout.note .title {
color: #17a2b8
}

.me-alert.callout.note .icon-note {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%2317a2b8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 108 0a8 8 0 000 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 100-2 1 1 0 000 2z'/%3E%3C/svg%3E")
}

.me-alert.callout.tip {
border-left-color: #28a745 !important;
white-space: pre-wrap;
}

.me-alert.callout.tip .title {
color: #28a745
}

.me-alert.callout.tip .icon-tip {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 352 512' fill='%2328a745' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/%3E%3C/svg%3E")
}

.me-alert.callout.warning {
border-left-color: #f0ad4e !important;
white-space: pre-wrap;
}

.me-alert.callout.warning .title {
color: #f0ad4e
}

.me-alert.callout.warning .icon-warning {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 17 16' fill='%23f0ad4e' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8.982 1.566a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 00-.9.995l.35 3.507a.552.552 0 001.1 0l.35-3.507A.905.905 0 008 5zm.002 6a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E")
}

.me-alert.callout.attention {
border-left-color: #dc3545 !important;
white-space: pre-wrap;
}

.me-alert.callout.attention .title {
color: #dc3545
}

.me-alert.callout.attention .icon-attention {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%23dc3545' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z'/%3E%3Cpath fill-rule='evenodd' d='M11.354 4.646a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708l6-6a.5.5 0 01.708 0z'/%3E%3C/svg%3E")
}

.me-alert.flat {
border-radius: .125rem;
color: #383d41;
background-color: #e2e3e5;
border: 1px solid #d6d8db
}

.me-alert.flat.note {
color: #02587f;
background-color: #cdeefd;
border-color: #b4e6fc
}

.me-alert.flat.note .title {
color: #01354d
}

.me-alert.flat.note .icon-note {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%2301354d' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 16A8 8 0 108 0a8 8 0 000 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 100-2 1 1 0 000 2z'/%3E%3C/svg%3E")
}

.me-alert.flat.tip {
color: #285b2a;
background-color: #dbefdc;
border-color: #c9e7cb
}

.me-alert.flat.tip .title {
color: #18381a
}

.me-alert.flat.tip .icon-tip {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 352 512' fill='%2318381a' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0026.64 14.28h61.71a31.99 31.99 0 0026.64-14.28l17.09-25.69a31.989 31.989 0 005.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z'/%3E%3C/svg%3E")
}

.me-alert.flat.warning {
color: #852d12;
background-color: #ffddd3;
border-color: #ffc9ba
}

.me-alert.flat.warning .title {
color: #581e0c
}

.me-alert.flat.warning .icon-warning {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 17 16' fill='%23581e0c' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8.982 1.566a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 00-.9.995l.35 3.507a.552.552 0 001.1 0l.35-3.507A.905.905 0 008 5zm.002 6a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E")
}

.me-alert.flat.attention {
color: #7f231c;
background-color: #fdd9d7;
border-color: #fcc2bf
}

.me-alert.flat.attention .title {
color: #551713
}

.me-alert.flat.attention .icon-attention {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='%23551713' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z'/%3E%3Cpath fill-rule='evenodd' d='M11.354 4.646a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708l6-6a.5.5 0 01.708 0z'/%3E%3C/svg%3E")
}

.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
15 changes: 15 additions & 0 deletions PSC.Blazor.Components.MarkdownEditor/wwwroot/css/textarearesize.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
div.grippie {
background: #EEEEEE url(../grippie.png) no-repeat scroll center 2px;
border-color: #DDDDDD;
border-style: solid;
border-width: 0pt 1px 1px;
cursor: s-resize;
height: 9px;
overflow: hidden;
}

.resizable-textarea {
display: block;
margin-bottom: 0pt;
height: 30%;
}
21 changes: 21 additions & 0 deletions PSC.Blazor.Components.MarkdownEditor/wwwroot/css/video.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
8 changes: 4 additions & 4 deletions PSC.Blazor.Components.MarkdownEditor/wwwroot/js/easymde.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 00eed45

Please sign in to comment.