created: 2024-11-20 05:37 tags: - daily-notes

Wednesday, November 20, 2024

<< Timestamps/2024/11-November/2024-11-19-Tuesday|Yesterday | Timestamps/2024/11-November/2024-11-21-Thursday|Tomorrow >>

🎯 Goal

• [x] Fix the HTML sanitization error when trying to embed HTML into the editor, then close out the ckeditor update issue

🌟 Results

• Completed the CKeditor update
• Used sourceEditor to include additional HTML into blog posts

🌱 Next Time

• Configure the blog post subscription feature

📝 Notes

Embedded HTML will save once, then gets sanitized / cleaned / removed upon re-opening the blog post form. This issue seems to be common for CKeditor 5, and a similar issue is outlined in this stack overflow post.

A workaround for this could be to get the sourceEditing component of the toolbar to work instead of trying to use the htmlEmbed tool explicitly. Not as elegant, but it is another option if I really get stuck here.

I added the htmlSupport configuration to my CKEDITOR_5_CONFIGS as outlined here and here:

"htmlSupport": {
    "allow": [
        {"name": "/.*/", "attributes": True, "classes": True, "styles": True}
    ]
},

I want to start by exploring the option of using the HTML embed tool (htmlEmbed) which is discussed here. Wasn't able to figure this out fast enough so I decided to just use the sourceEditing procedure instead. This is what I was using initially and while it's not ideal, it gets the job done. The config here seems to avoid the HTML sanitization error when working through editing the raw HTML code:

--redacted--

--redacted--

And upon refreshing the page the test div tag remains (<div class="test"></div>). Only thing that is a pain is that the sourceEditing text box is small and cannot be scrolled through. I should be able to alter this by adjusting the config/css/ckeditor_custom.css file. I found that the actual source editing area was accessible via the following CSS configuration:

textarea[aria-label="Source code editing area"] {
    max-height: 500px;
    overflow-y: auto;
    width: 100%;
    min-height: 300px;
    font-family: monospace;
    font-size: 14px;
}

This allows me to actually scroll through and search the sourceEditing component of my CKeditor, which makes it much easier to adjust / edit tags.

--redacted--

Now it is time for the moment of truth! I'll push this update to Production and see what happens. Normally this is where I'd like a Staging environment to test things out but here we are. Maybe I can configure some system with Heroku that isn't running all the time like my website, but is instead only deployed when I'm testing out a new feature launch.

First I backed up my PostgreSQL db:

heroku login
heroku pg:backups:capture -a dimmin

Which generated db b009 just in case anything went wrong.

Then, I merged the Pull Request with the master branch and pushed to production with Heroku via

git checkout master
git pull
git push origin master

aaaaaaand the build failed. Looks like pywin32 was a package identified in my requirements.txt as necessary, however Heroku deploys the server on a Linux system. I removed it from the requirements.txt file and re-deployed the site which worked.

I double-checked everything and sure enough the updated CKeditor changes (with HTML embed support through sourceEditing were available and functioning.)

--redacted--

which allowed me to close out the update ckeditor issue.

Next I decided to work on resolving the blog post subscription issue. The main idea here is that there is no way to inform users when a new blog post has been released even though there is an option on the site to "subscribe" to my blog.

--redacted--

I'll need to do a few things here to activate this feature:

1. Adjust the input HTML form to receive input
   1. Validate that the input is actually a potential email
2. Verify that the user did request to sign up for the blog (maybe this step is unnecessary?)
3. Add the email to a mailing list that is reached out to when a new blog post is published
   1. Maybe if the email already exists in my Accounts App I can mark them as a blog subscriber or something
4. Determine when to send the email to the list of users.

I already have the form in my templates/home.html file as

<form action="{% url 'home' %}">
    <input type="text" placeholder="Your email">
    <input class="sidebar-widget__subscribe-submit" type="submit" value="Submit">
</form>

The first thing I had to do was include the CSRF Token.

Notes created today

List FROM "" WHERE file.cday = date("2024-11-20") SORT file.ctime asc

Notes last touched today

List FROM "" WHERE file.mday = date("2024-11-20") SORT file.mtime asc

(Template referenced from Dann Berg, can be found here)