Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now able to save the HTML text from tip tap element.

Browse Source
This commit is contained in:
Scott Idem
2024-11-01 17:52:39 -04:00
parent 8ec01a1d64
commit 2d047f5a10
3 changed files with 104 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/element_tiptap_editor.svelte
View File

@@ -81,7 +81,7 @@ if (show_button_kv) {
show_button_kv = show_button_kv_defaults;
}
export let new_json = editor?.getJSON();
// export let new_json = editor?.getJSON();
export let new_html: string = '';
onMount(() => {
@@ -96,8 +96,22 @@ onMount(() => {
onTransaction: () => {
// force re-render so `editor.isActive` works as expected
editor = editor;
new_html = editor.getHTML();
let updated_html = editor.getHTML();
if (updated_html == '<p></p>') {
new_html = '';
} else {
new_html = updated_html;
}
},
onUpdate: ({ editor }) => {
let updated_html = editor.getHTML();
if (updated_html == '<p></p>') {
new_html = '';
} else {
new_html = updated_html;
}
}
});
});
@@ -106,6 +120,13 @@ onDestroy(() => {
editor.destroy();
}
});
function getContent() {
if (editor) {
return editor.getHTML();
}
return '';
}
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->

17
src/routes/idaa/(idaa)/recovery_meetings/+page.svelte
View File

@@ -142,6 +142,23 @@ $: lq_new__event_obj_li = liveQuery(async () => {
lq__event_obj={lq__event_obj}
/>
<svelte:fragment slot="footer">
<div class="text-center w-full">
<button
type="button"
on:click={() => {
console.log('Close modal');
$idaa_sess.recovery_meetings.show__modal_edit = false;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</div>
</svelte:fragment>
</Modal>
<!-- Main modal -->

165
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
View File

@@ -226,69 +226,19 @@ if ($ae_loc.lu_country_subdivision_list && $ae_loc.lu_country_subdivision_list.l
}
onMount(() => {
console.log('** Component Mounted: ** Edit - Event Obj');
tinymce_remove(); // This seems to fix rendering issues
tinymce_init();
});
// onMount(() => {
// console.log('** Component Mounted: ** Edit - Event Obj');
// });
onDestroy(() => {
console.log('** Component Destroyed: ** Edit - Event Obj');
tinymce_remove(); // This seems like the right thing to do
});
// onDestroy(() => {
// console.log('** Component Destroyed: ** Edit - Event Obj');
// });
// afterUpdate(() => {
// console.log('** Component Updated: ** Edit - Event Obj');
// tinymce_init();
// });
function tinymce_init() {
// REFERENCE: https://www.tiny.cloud/docs/tinymce/6/basic-setup/
// plugins: [
// 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
// 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
// 'media', 'table', 'emoticons', 'template', 'help'
// ],
// 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
// // NOTE: Basic version of the TinyMCE editor
// tinymce.init({
// selector: '.tinymce_editor.editor_basic',
// // width: 600,
// height: 400,
// plugins: [ 'lists', 'code', 'help' ],
// menubar: false,
// toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
// });
// // NOTE: Minimal version of the TinyMCE editor
// tinymce.init({
// selector: '.tinymce_editor.editor_basic_200',
// // width: 600,
// height: 200,
// plugins: [ 'lists', 'code', 'help' ],
// menubar: false,
// toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
// });
// // NOTE: Less is more version of the TinyMCE editor
// tinymce.init({
// selector: '.tinymce_editor.editor_less_100',
// // width: 600,
// height: 100,
// // plugins: [ 'lists', 'code', 'help' ],
// menubar: false,
// toolbar: false,
// statusbar: false,
// });
}
function tinymce_remove() {
// tinymce.remove('.tinymce_editor.editor_basic');
// tinymce.remove('.tinymce_editor.editor_basic_200');
// tinymce.remove('.tinymce_editor.editor_less_100');
}
$: if ($idaa_slct.event_obj) {
@@ -320,17 +270,15 @@ async function handle_submit_form(event: any) {
event_data['name'] = event_meeting_data.name;
if (event_meeting_data.description) {
event_data['description'] = event_meeting_data.description;
// Check if the description_new_html exists and is a string
if (typeof $idaa_slct.event_obj.description_new_html === 'string') {
console.log('New description is a string');
event_data['description'] = $idaa_slct.event_obj.description_new_html;
} else {
event_data['description'] = null;
console.log('New description is not a string. Do nothing.');
// event_data['description'] = event_meeting_data.description;
}
// if (tinyMCE.get('description')) {
// event_data['description'] = tinyMCE.get('description').getContent();
// } else {
// event_data['description'] = event_meeting_data.description;
// }
event_data['type'] = event_meeting_data.type;
event_data['physical'] = !!event_meeting_data.physical;
event_data['virtual'] = !!event_meeting_data.virtual;
@@ -360,22 +308,24 @@ async function handle_submit_form(event: any) {
}
// event_data['location_address_json'] = address;
// if (tinyMCE.get('location_text')) {
// event_data['location_text'] = tinyMCE.get('location_text').getContent();
// } else {
// event_data['location_text'] = event_meeting_data.location_text;
// }
// Check if the location_text_new_html exists and is a string
if (typeof $idaa_slct.event_obj.location_text_new_html === 'string') {
event_data['location_text'] = $idaa_slct.event_obj.location_text_new_html;
} else {
console.log('New location text is not a string. Do nothing.');
}
event_data['attend_url'] = event_meeting_data.attend_url;
event_data['attend_url_passcode'] = event_meeting_data.attend_url_passcode;
event_data['attend_phone'] = event_meeting_data.attend_phone;
event_data['attend_phone_passcode'] = event_meeting_data.attend_phone_passcode;
// if (tinyMCE.get('attend_text')) {
// event_data['attend_text'] = tinyMCE.get('attend_text').getContent();
// } else {
// event_data['attend_text'] = event_meeting_data.attend_text;
// }
// Check if the attend_text_new_html exists and is a string
if (typeof $idaa_slct.event_obj.attend_text_new_html === 'string') {
event_data['attend_text'] = $idaa_slct.event_obj.attend_text_new_html;
} else {
console.log('New attend text is not a string. Do nothing.');
}
event_data['timezone'] = event_meeting_data.timezone;
@@ -405,11 +355,12 @@ async function handle_submit_form(event: any) {
event_data['recurring_end_time'] = event_meeting_data.recurring_end_time;
}
// if (tinyMCE.get('recurring_text')) {
// event_data['recurring_text'] = tinyMCE.get('recurring_text').getContent();
// } else {
// event_data['recurring_text'] = event_meeting_data.recurring_text;
// }
// Check if the recurring_text_new_html exists and is a string
if (typeof $idaa_slct.event_obj.recurring_text_new_html === 'string') {
event_data['recurring_text'] = $idaa_slct.event_obj.recurring_text_new_html;
} else {
console.log('New recurring text is not a string. Do nothing.');
}
console.log(event_data['recurring_text']);
if (!event_data['recurring_text'] || event_data['recurring_text'].includes('*gen*')) {
@@ -491,11 +442,12 @@ async function handle_submit_form(event: any) {
event_data['enable'] = !!event_meeting_data.enable;
}
// if (tinyMCE.get('notes')) {
// event_data['notes'] = tinyMCE.get('notes').getContent();
// } else {
// event_data['notes'] = event_meeting_data.notes;
// }
// Check if the notes_new_html exists and is a string
if (typeof $idaa_slct.event_obj.notes_new_html === 'string') {
event_data['notes'] = $idaa_slct.event_obj.notes_new_html;
} else {
console.log('New notes is not a string. Do nothing.');
}
console.log(event_data);
@@ -665,6 +617,18 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
{/if}
{/await}
<section class="text-center"> <!-- BEGIN: section event__options -->
{#if $idaa_slct.event_id}
<button
type="submit"
disabled={(disable_submit_btn)}
class="ae_btn btn_primary btn btn-primary variant-ghost-primary hover:variant-filled-primary transition"
>
<span class="fas fa-check m-1"></span> Save?
</button>
{/if}
</section> <!-- END: section event__options -->
<!-- <h3>Recovery Meeting</h3> -->
<input type="hidden" value={$idaa_slct.event_id} />
@@ -688,7 +652,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<!-- {@html $idaa_slct.event_obj?.description_new_html ?? 'not sure?'} -->
<!-- If changed then show Save button -->
{#if
<!-- {#if
$idaa_slct.event_obj.description_new_html &&
$idaa_slct.event_obj?.description_new_html != '<p></p>' &&
$idaa_slct.event_obj.description != $idaa_slct.event_obj.description_new_html}
@@ -697,11 +661,10 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
class="btn btn-md btn-primary variant-ghost-secondary"
on:click={() => $idaa_slct.event_obj.description = $idaa_slct.event_obj.description_new_html}
>
<!-- <span class="icon">💾</span> -->
<span class="fas fa-save m-1"></span>
Save?
</button>
{/if}
{/if} -->
</label>
@@ -843,7 +806,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
/>
<!-- If changed then show Save button -->
{#if
<!-- {#if
$idaa_slct.event_obj?.location_text_new_html &&
$idaa_slct.event_obj?.location_text_new_html != '<p></p>' &&
$idaa_slct.event_obj.location_text != $idaa_slct.event_obj.location_text_new_html}
@@ -855,7 +818,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<span class="fas fa-save m-1"></span>
Save?
</button>
{/if}
{/if} -->
</label>
<fieldset
@@ -890,7 +853,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
/>
<!-- If changed then show Save button -->
{#if
<!-- {#if
$idaa_slct.event_obj?.attend_text_new_html &&
$idaa_slct.event_obj?.attend_text_new_html != '<p></p>' &&
$idaa_slct.event_obj.attend_text != $idaa_slct.event_obj.attend_text_new_html}
@@ -902,7 +865,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<span class="fas fa-save m-1"></span>
Save?
</button>
{/if}
{/if} -->
</label>
</section> <!-- END: section event__how_to_attend -->
@@ -985,7 +948,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<label>End Time <input name="recurring_end_time" type="time" value={$lq__event_obj?.recurring_end_time} max="8" class="input w-40" /></label>
</fieldset>
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
<p>Please only use the text box for additional information if the options above do not cover your needs. This may affect how this meeting shows up in search results.</p>
<label for="recurring_text">Additional information on when and how often
<!-- <textarea class="ae_value event__recurring_text tinymce_editor editor_less_100 textarea" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj?.recurring_text ?? ''}></textarea> -->
@@ -997,7 +960,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
/>
<!-- If changed then show Save button -->
{#if
<!-- {#if
$idaa_slct.event_obj?.recurring_text_new_html &&
$idaa_slct.event_obj?.recurring_text_new_html != '<p></p>' &&
$idaa_slct.event_obj.recurring_text != $idaa_slct.event_obj.recurring_text_new_html}
@@ -1009,18 +972,18 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<span class="fas fa-save m-1"></span>
Save?
</button>
{/if}
{/if} -->
</label>
{/if}
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
<button
type="button"
class="ae_btn ae_smaller btn btn-info btn-sm ae_width_md variant-ghost-warning hover:variant-filled-warning transition"
style=""
on:click|preventDefault={() => {
if (confirm('Are you sure you want to remove the text for the additional details?')) {
// tinyMCE.get('recurring_text').setContent('');
$idaa_slct.event_obj.recurring_text = '';
// $idaa_slct.event_obj.recurring_text = '';
$idaa_slct.event_obj.recurring_text_new_html = '';
$idaa_slct.event_obj.show_recurring_text = false;
} else {
return false;
@@ -1037,9 +1000,9 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
on:click|preventDefault={() => {
// Remove *gen* prefix from recurring_text
if ($lq__event_obj.recurring_text && $lq__event_obj.recurring_text.includes('*gen*')) {
$lq__event_obj.recurring_text = $lq__event_obj.recurring_text.replace('*gen* ', '');
$idaa_slct.event_obj.recurring_text = $lq__event_obj.recurring_text.replace('*gen* ', '');
}
$lq__event_obj.show_recurring_text = true;
$idaa_slct.event_obj.show_recurring_text = true;
}}
>
<span class="fas fa-plus m-1"></span> Add More Details?
@@ -1272,7 +1235,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
/>
<!-- If changed then show Save button -->
{#if
<!-- {#if
$idaa_slct.event_obj?.notes_new_html &&
$idaa_slct.event_obj?.notes_new_html != '<p></p>' &&
$idaa_slct.event_obj.notes != $idaa_slct.event_obj.notes_new_html}
@@ -1284,7 +1247,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<span class="fas fa-save m-1"></span>
Save?
</button>
{/if}
{/if} -->
<!-- {$idaa_slct.event_obj?.notes_new_html} -->
</label>
{/if}