Skip to content

Commit

Permalink
Merge pull request #15 from mattbegent/feature/image-alt-text-override
Browse files Browse the repository at this point in the history 
Add image alt text override
  • Loading branch information
@mattbegent
mattbegent authored Jul 16, 2024
2 parents bda5983 + a842b86 commit 0fc65b7
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 29 deletions.
42 changes: 41 additions & 1 deletion Umbraco.Community.Skrivlet/Converters/ListBlockDataConverter.cs
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,26 @@
using System.Text.Json;
using System.Text.RegularExpressions;
using Umbraco.Cms.Core;
using Umbraco.Cms.Core.Routing;
using Umbraco.Cms.Core.Web;
using Umbraco.Extensions;

namespace Umbraco.Community.SkrivLet.Converters
{
public class ListBlockDataConverter : IBlockDataConverter
{
private const string UmbLinkPattern = "(<a\\s+(?:[^>]*?\\s+)?href=\")(umb:\\/\\/[^\"]*)\"";
private readonly IUmbracoContextAccessor _umbracoContextAccessor;
private readonly IPublishedUrlProvider _publishedUrlProvider;

public ListBlockDataConverter(
IUmbracoContextAccessor umbracoContextAccessor,
IPublishedUrlProvider publishedUrlProvider)
{
_umbracoContextAccessor = umbracoContextAccessor;
_publishedUrlProvider = publishedUrlProvider;
}

public bool CanConvert(string type)
{
return type.Equals("list");
Expand Down Expand Up @@ -45,7 +62,7 @@ public SkrivLetBlockBase Convert(ref Utf8JsonReader reader, string id, string ty
reader.Read();
while (reader.TokenType != JsonTokenType.EndArray)
{
block.Data.Items.Add(reader.GetString() ?? "");
block.Data.Items.Add(ConvertUrls(reader.GetString() ?? ""));
reader.Read();
}
}
Expand All @@ -56,6 +73,29 @@ public SkrivLetBlockBase Convert(ref Utf8JsonReader reader, string id, string ty
}
return block;
}
private string ConvertUrls(string text)
{
return Regex.Replace(text, UmbLinkPattern, ConvertUdiUrl);
}

private string ConvertUdiUrl(Match match)
{
var udiText = match.Groups[2].Value;

var udi = UdiParser.Parse(udiText);

if (!_umbracoContextAccessor.TryGetUmbracoContext(out var context)
|| context.Content == null)
{
return string.Empty;
}
var content = context.Content.GetById(udi);
if (content == null)
{
return string.Empty;
}
return $"{match.Groups[1].Value}{content.Url(_publishedUrlProvider)}\"";
}
}

public class ListBlockData
Expand Down
2 changes: 1 addition & 1 deletion Umbraco.Community.Skrivlet/SkrivLet.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<Product>Umbraco.Community.SkrivLet</Product>
<Title>SkrivLet</Title>
<Description>SkrivLet, A clean WYSIWYG property editor for distraction free writing in Umbraco.</Description>
<Version>0.4.0</Version>
<Version>0.5.0</Version>
<Authors>Matt Begent, Steve Temple</Authors>
<Company>Matt Begent, Steve Temple</Company>
<Copyright>$([System.DateTime]::Now.Year) © $(Company)</Copyright>
Expand Down
75 changes: 51 additions & 24 deletions Umbraco.Community.Skrivlet/wwwroot/App_Plugins/SkrivLet/skrivlet.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,38 @@
angular.module('umbraco').controller('SkrivLetController', function ($scope, editorService) {

class RenderHelper {

static randomUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}

static createLabel(id, cssClass, text) {
const label = document.createElement('label');
label.innerHTML = text;
label.classList.add(cssClass);
label.setAttribute('for', id);
return label;
}

static createInput(id, value, text, type) {
const input = document.createElement('input');
input.setAttribute('type', type);
if(value) {
input.setAttribute('value', value);
}
if(text) {
input.setAttribute('placeholder', text);
}
input.setAttribute('id', id);
input.classList.add('cdx-input');
return input;
}

}

class UmbracoLinkTool {

static get isInline() {
Expand Down Expand Up @@ -109,17 +142,6 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
};
}

/**
* Automatic sanitize config
* @see {@link https://editorjs.io/sanitize-saved-data}
*/
// static get sanitize() {
// return {
// url: {},
// img: {}
// }
// }

constructor({ data, api, config }) {
this.api = api;
this.config = config || {};
Expand All @@ -131,6 +153,8 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi

this.wrapper = undefined;
this.input = undefined;
this.altTextLabel = undefined;
this.altTextInput = undefined;
this.image = undefined;
this.button = undefined;
}
Expand All @@ -139,6 +163,11 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
this.wrapper = document.createElement('div');
this.input = document.createElement('input');
this.input.setAttribute('type', 'hidden');

const altTextID = RenderHelper.randomUUID();
this.altTextLabel = RenderHelper.createLabel(altTextID, 'sr-only', 'Alt text');
this.altTextInput = RenderHelper.createInput(altTextID, this.data.alt, 'Enter alt text', 'text');

this.wrapper.classList.add('simple-image');

this._createImage(this.data.url);
Expand All @@ -153,6 +182,8 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
this.image.addEventListener('click', () => {
this._openMediaPicker();
});
this.wrapper.appendChild(this.altTextLabel);
this.wrapper.appendChild(this.altTextInput);
this.wrapper.appendChild(this.button);
this.wrapper.appendChild(this.input);

Expand All @@ -175,6 +206,7 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
this.input.value = imageUrl;
this.image.src = imageUrl;
this.image.alt = imageAlt;
this.altTextInput.value = imageAlt;
this.button.textContent = this.data && this.data.url ? "Change image" : "Select an image";
//this.render();
this.save();
Expand Down Expand Up @@ -204,7 +236,7 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
save(blockContent) {
return {
url: this.data.url,
alt: this.data.alt,
alt: this.altTextInput.value,
udi: this.data.udi,
width: this.data.width,
height: this.data.height
Expand All @@ -224,20 +256,12 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
render() {
if (!this.data.service) {
const container = document.createElement('div');

this.element = container;

const label = document.createElement('label');
label.innerHTML = 'Enter a URL to embed a video from YouTube or Vimeo';
label.classList.add('cdx-label');
label.setAttribute('for', 'embed-input');
const label = RenderHelper.createLabel('embed-input', 'cdx-label', 'Enter a URL to embed a video from YouTube or Vimeo');
container.appendChild(label);

const input = document.createElement('input');
input.classList.add('cdx-input');
input.placeholder = '';
input.type = 'url';
input.id = 'embed-input';
const input = RenderHelper.createInput('embed-input', '', '', 'url');
input.addEventListener('paste', (event) => {
const url = event.clipboardData.getData('text');
const service = Object.keys(Embed.services).find((key) => Embed.services[key].regex.test(url));
Expand Down Expand Up @@ -287,7 +311,10 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
quote: Quote,
code: CodeTool,
raw: RawTool,
list: List,
list: {
class: List,
inlineToolbar: true
},
checklist: Checklist,
link: UmbracoLinkTool // override link with Umbraco link picker
},
Expand All @@ -297,7 +324,7 @@ angular.module('umbraco').controller('SkrivLetController', function ($scope, edi
editor.save().then((outputData) => {
$scope.model.value = JSON.stringify(outputData);
}).catch((error) => {
console.log('Saving failed: ', error)
console.log('Saving failed: ', error);
});

},
Expand Down
9 changes: 7 additions & 2 deletions Umbraco.Community.Skrivlet/wwwroot/App_Plugins/SkrivLet/skrivlet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,18 @@
.simple-image input,
.simple-image [contenteditable] {
width: 100%;
padding: 10px;
padding: 10px 12px;
border: 1px solid #e4e4e4;
background: #fff;
box-sizing: border-box;
border-radius: 3px;
outline: none;
font-size: 14px;
font-size: 15px;
height: auto;
}

.simple-image input {
margin-bottom: 7px;
}

.simple-image img {
Expand Down
2 changes: 1 addition & 1 deletion version.txt
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
0.4.0
0.5.0

0 comments on commit 0fc65b7

Please sign in to comment.